修改编辑文章,编辑html（未完成,已注释）

playalot · Jul 26, 2017 · d4b56bc · d4b56bc
1 parent 9b83d79
commit d4b56bc
Show file tree

Hide file tree

Showing 8 changed files with 343 additions and 156 deletions.
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "admin-lte": "^2.3.8",
     "bootstrap": "^3.3.7",
     "bootstrap-sass": "^3.3.7",
+    "draft-convert": "^1.4.8",
     "draft-js": "^0.10.1",
     "draft-js-export-html": "^0.5.4",
     "draft-js-utils": "^0.1.6",

diff --git a/src/sass/layout/_draft.scss b/src/sass/layout/_draft.scss
@@ -83,46 +83,9 @@
     margin-bottom:10px;
   }
 
-  .modal{
-    position: fixed;
-    top:0;left:0;right:0;bottom:0;
-    background-color: rgba(0,0,0,.05);
-    display: flex;
-    justify-content:center;
-    align-items:center;
-    z-index: 1;
-  }
   .upload-dialog{
     font-size:20px;
   }
-  .dialog{
-    background-color: white;
-    width:60%;
-    padding:15px;
-    position: relative;
-    color:#999;
-    max-width: 700px;
-    box-shadow: 0 10px 16px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
-  }
-  .dialog-title{
-    margin:10px 10px 20px;
-  }
-  .dialog-close{
-    position: absolute;
-    top:15px;
-    right:15px;
-    font-size: 21px;
-    font-weight: bold;
-    cursor:pointer;
-
-    &:hover{
-      color:#444;
-    }
-  }
-  .dialog-footer{
-    margin:10px 0;
-  }
-
   .image-list{
     display: flex;
     flex-wrap:wrap;
@@ -138,95 +101,111 @@
     width:100%;
     min-height:60px;
   }
-  .edit-root {
-    background: #fff;
-    font-family: -apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
-    font-size: 16px;
-    padding: 15px;
-    color:#333;
-    .edit-editor {
-      padding-bottom: 15px;
+
+
+  .edit-section {
+      padding: 10px 0;
+  }
+
+}
+#page-affix{
+  padding: 10px 0;
+  top: 50px;
+  z-index: 2;
+  background-color: rgba(255, 255, 255, 0.9)
+}
+@media screen and  (max-width: 992px) {
+  #page-affix{
+    top:0;
+  }
+}
+.edit-root {
+  background: #fff;
+  font-family: -apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
+  font-size: 16px;
+  padding:0 15px;
+  color:#333;
+  .DraftEditor-editorContainer {
+    .public-DraftStyleDefault-block{
+      line-height:1.7;
+      margin-bottom:20px;
     }
-    .DraftEditor-editorContainer {
+    h1 {
+      padding: 0;
+      margin:0;
       .public-DraftStyleDefault-block{
-        line-height:1.7;
-        margin-bottom:20px;
-      }
-      h1 {
-        padding: 0;
-        margin:0;
-        .public-DraftStyleDefault-block{
-          font-size: 24px;
-          font-weight: 400;
-        }
-      }
-      h2{
-        font-weight: 500;
-        font-size: 18px;
-        padding: 0 15px;
-        text-align: justify;
+        font-size: 24px;
+        font-weight: 400;
       }
-      ol,ul {
-        li {
-          .public-DraftStyleDefault-block{
-            margin:0;
-          }
-          &:before{
-            top:3px;
-          }
-        }
-      }
-      blockquote {
-        border-left: 5px solid #eee;
-        padding: 0 20px;
+    }
+    h2{
+      font-weight: 500;
+      font-size: 18px;
+      padding: 0 15px;
+      text-align: justify;
+    }
+    ol,ul {
+      li {
         .public-DraftStyleDefault-block{
           margin:0;
-          color: #666;
-          font-size: 15px;
-          font-weight: 400;
-          line-height: 28px;
         }
-      }
-      figure {
-        margin: 0;
-        margin-top: 10px;
-        text-align: center;
-        iframe {
-          width: 100%;
-          height: 240px;
+        &:before{
+          top:3px;
         }
       }
     }
-    .DraftEditor-root{
-      min-height:100px;
-      .public-DraftEditorPlaceholder-root {
-        line-height:1.7;
+    blockquote {
+      border-left: 5px solid #eee;
+      padding: 0 20px;
+      .public-DraftStyleDefault-block{
+        margin:0;
+        color: #666;
+        font-size: 15px;
+        font-weight: 400;
+        line-height: 28px;
+      }
+    }
+    figure {
+      margin: 0;
+      margin-top: 10px;
+      text-align: center;
+      img{
+        max-width: 100%;
+      }
+      iframe {
+        width: 100%;
+        height: 240px;
       }
-      .edit-hidePlaceholder {
-        .public-DraftEditorPlaceholder-root {
-          display: none;
-        }
-      } 
     }
   }
-
-  .edit-section {
-      padding: 10px 0;
+  .RichEditor-root{
+    .public-DraftEditorPlaceholder-root {
+      line-height:1.7;
+    }
+    .public-DraftEditor-content{
+      min-height:150px;
+    }
   }
-
-
-  .edit-controls {
+  .RichEditor-hidePlaceholder{
+    .public-DraftEditorPlaceholder-root {
+        display: none;
+    }
+  }
+}
+.edit-controls {
     padding:0 15px 0 10px;
     border-right:1px solid #eee;
     display: inline-flex;
     align-items:center;
-    color:rgb(165,165,165);
+    color:#999;
     &:last-child{
       border:none;
     }
     span,.fa{
       margin:0 10px;
       cursor:pointer;
+      font-size: 14px;
+      transition: color .3s;
       &:hover{
         color:rgb(82,83,84);
       }
@@ -235,19 +214,6 @@
       }
     }
   }
-}
-#page-affix{
-  padding: 10px 0;
-  top: 50px;
-  z-index: 2;
-  background-color: rgba(255, 255, 255, 0.9)
-}
-@media screen and  (max-width: 992px) {
-  #page-affix{
-    top:0;
-  }
-}
-
 .draft-image{
   position:relative;
   margin:5px 0;