fix: update css editor

更新样式编辑器代码

.gitignore

@@ -0,0 +1,29 @@
+  
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+dist
+package-lock.json
+lib

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "liveServer.settings.port": 5501
-}

assets/scripts/editor.js

@@ -32,19 +32,19 @@ let app = new Vue({
         { label: '翡翠绿', value: 'rgba(0, 152, 116, 0.9)', hex: '清新且优雅' },
         { label: '辣椒红', value: 'rgba(155, 35, 53, 0.9)', hex: '自信且迷人' }
       ],
-      showBox:true,
+      showBox: true,
       aboutDialogVisible: false
     };
     d.currentEditorTheme = d.editorThemes[0].value;
     d.currentCssEditorTheme = d.editorThemes[0].value;
     d.currentFont = d.builtinFonts[0].value;
     d.currentSize = d.sizeOption[1].value;
-    d.currentColor = d.colorOption[1].value;
+    d.currentColor = d.colorOption[0].value;
     return d;
   },
   mounted() {
     this.showBox = false
-    
+
     this.editor = CodeMirror.fromTextArea(
       document.getElementById('editor'),
       {
@@ -56,34 +56,34 @@ let app = new Vue({
       }
     );
     this.cssEditor = CodeMirror.fromTextArea(
-        document.getElementById('cssEditor'), {
+      document.getElementById('cssEditor'), {
-            mode: 'css',
+      mode: 'css',
-            theme: 'style-mirror',
+      theme: 'style-mirror',
-            lineNumbers:false,
+      lineNumbers: false,
-            lineWrapping: true,
+      lineWrapping: true,
-            matchBrackets: true,
+      matchBrackets: true,
-            autofocus: true,
+      autofocus: true,
-            extraKeys: {
+      extraKeys: {
-                "Ctrl-F": function autoFormat(editor) {
+        "Ctrl-F": function autoFormat(editor) {
-                    var totalLines = editor.lineCount();
+          var totalLines = editor.lineCount();
-                          editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
+          editor.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines });
-                }
-            },
         }
+      },
+    }
     );
     // 自动提示
     this.cssEditor.on("keyup", (cm, e) => {
-        if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
+      if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
-          cm.showHint(e);
+        cm.showHint(e);
-        }
+      }
-      });
+    });
     this.editor.on("change", (cm, change) => {
       this.refresh();
       this.saveEditorContent(this.editor, '__editor_content');
     });
     this.cssEditor.on('update', (instance) => {
-        this.cssChanged()
+      this.cssChanged();
-        this.saveEditorContent(this.cssEditor, '__css_content');
+      this.saveEditorContent(this.cssEditor, '__css_content');
     });
     this.wxRenderer = new WxRenderer({
       theme: setColor(this.currentColor),
@@ -98,13 +98,13 @@ let app = new Vue({
     }
 
     if (localStorage.getItem("__css_content")) {
-        this.cssEditor.setValue(localStorage.getItem("__css_content"));
+      this.cssEditor.setValue(localStorage.getItem("__css_content"));
-      } else {
+    } else {
-        this.cssEditor.setValue(DEFAULT_CSS_CONTENT);
+      this.cssEditor.setValue(DEFAULT_CSS_CONTENT);
     }
   },
   methods: {
- 
+
     renderWeChat(source) {
       let output = marked(source, { renderer: this.wxRenderer.getRenderer() });
       if (this.wxRenderer.hasFootnotes()) {
@@ -140,12 +140,12 @@ let app = new Vue({
       this.refresh();
     },
     cssChanged() {
-        let json = css2json(this.cssEditor.getValue(0))
+      let json = css2json(this.cssEditor.getValue(0))
-        let theme = customCssWithTemplate(json,this.currentColor)
+      let theme = customCssWithTemplate(json, this.currentColor)
-        this.wxRenderer.setOptions({
+      this.wxRenderer.setOptions({
-            theme
+        theme: theme
-        });
+      });
-        this.refresh();
+      this.refresh();
     },
     // 图片上传结束
     uploaded(response, file, fileList) {
@@ -161,7 +161,7 @@ let app = new Vue({
           message: '图片插入成功',
           type: 'success'
         });
-        
+
         this.refresh();
 
       } else {
@@ -215,7 +215,6 @@ let app = new Vue({
       }
     },
     customStyle() {
-        console.log(this.currentColor)
       this.showBox = !this.showBox;
     },
     setDefaultContent() {

assets/scripts/themes/default-theme.js

@@ -167,7 +167,7 @@ let default_theme = {
         footnote: {
             'font-size': '12px'
         },
-        
+
         figcaption: {
             'text-align': 'center',
             'color': '#888',

assets/scripts/util.js

@@ -13,35 +13,40 @@ function setColorWithTemplate(template) {
 
 let setColor = setColorWithTemplate(default_theme);
 
-function customCssWithTemplate(jsonString,color) {
+function customCssWithTemplate(jsonString, color) {
-        let custom_theme = JSON.parse(JSON.stringify(default_theme));
+    let custom_theme = JSON.parse(JSON.stringify(default_theme));
-        // block
+    // block
-        custom_theme.block.h1 = Object.assign(custom_theme.block.h1,jsonString.h1);
+    console.log(jsonString)
-        custom_theme.block.h2 = Object.assign(custom_theme.block.h2,jsonString.h2);
+    custom_theme.block.h1['border-bottom'] = `2px solid ${color}`;
-        custom_theme.block.h3 = Object.assign(custom_theme.block.h3,jsonString.h3);
+    custom_theme.block.h2['background'] = color;
-        custom_theme.block.h4 = Object.assign(custom_theme.block.h4,jsonString.h4);
+    custom_theme.block.h3['border-left'] = `3px solid ${color}`;
-        custom_theme.block.p = Object.assign(custom_theme.block.p,jsonString.p);
+    custom_theme.block.h4['color'] = color;
-        custom_theme.block.blockquote = Object.assign(custom_theme.block.blockquote,jsonString.blockquote);
+    custom_theme.inline.strong['color'] = color;
-        custom_theme.block.blockquote_p = Object.assign(custom_theme.block.blockquote_p,jsonString.blockquote_p);
-        custom_theme.block.code = Object.assign(custom_theme.block.code,jsonString.code);
-        custom_theme.block.image = Object.assign(custom_theme.block.image,jsonString.image);
-        custom_theme.block.ol = Object.assign(custom_theme.block.ol,jsonString.ol);
-        custom_theme.block.ul = Object.assign(custom_theme.block.ul,jsonString.ul);
-        custom_theme.block.footnotes = Object.assign(custom_theme.block.footnotes,jsonString.footnotes);
-        custom_theme.block.figure = Object.assign(custom_theme.block.figure,jsonString.figure);
 
-        // inline
+    custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1);
-        custom_theme.inline.strong = Object.assign(custom_theme.inline.strong,jsonString.strong);
+    custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2);
-        custom_theme.inline.table = Object.assign(custom_theme.inline.table,jsonString.table);
+    custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3);
-        custom_theme.inline.thead = Object.assign(custom_theme.inline.thead,jsonString.thead);
+    custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4);
-        custom_theme.inline.strong = Object.assign(custom_theme.inline.strong,jsonString.strong);
+    custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p);
-        custom_theme.inline.link = Object.assign(custom_theme.inline.link,jsonString.link);
+    custom_theme.block.blockquote = Object.assign(custom_theme.block.blockquote, jsonString.blockquote);
-        custom_theme.inline.wx_link = Object.assign(custom_theme.inline.wx_link,jsonString.wx_link);
+    custom_theme.block.blockquote_p = Object.assign(custom_theme.block.blockquote_p, jsonString.blockquote_p);
+    custom_theme.block.code = Object.assign(custom_theme.block.code, jsonString.code);
+    custom_theme.block.image = Object.assign(custom_theme.block.image, jsonString.image);
+    custom_theme.block.ol = Object.assign(custom_theme.block.ol, jsonString.ol);
+    custom_theme.block.ul = Object.assign(custom_theme.block.ul, jsonString.ul);
+    custom_theme.block.footnotes = Object.assign(custom_theme.block.footnotes, jsonString.footnotes);
+    custom_theme.block.figure = Object.assign(custom_theme.block.figure, jsonString.figure);
 
-        custom_theme.block.h2['background'] = color;
+    // inline
-        custom_theme.block.h3['border-left'] = `3px solid ${color}`;
+    custom_theme.inline.strong = Object.assign(custom_theme.inline.strong, jsonString.strong);
-        custom_theme.inline.strong['color'] = color;
+    custom_theme.inline.table = Object.assign(custom_theme.inline.table, jsonString.table);
-        return custom_theme;
+    custom_theme.inline.thead = Object.assign(custom_theme.inline.thead, jsonString.thead);
+    custom_theme.inline.strong = Object.assign(custom_theme.inline.strong, jsonString.strong);
+    custom_theme.inline.link = Object.assign(custom_theme.inline.link, jsonString.link);
+    custom_theme.inline.wx_link = Object.assign(custom_theme.inline.wx_link, jsonString.wx_link);
+
+    
+    return custom_theme;
 
 }
 
@@ -71,7 +76,7 @@ function css2json(css) {
         // `font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;` 
         //  ==>
         // `{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}`
-        
+
         // 辅助方法：将array转为object
         function toObject(array) {
             let ret = {};
@@ -118,7 +123,7 @@ function css2json(css) {
         // 继续下个声明块
         css = css.slice(rbracket + 1).trim();
     }
-    
+
     // 返回JSON形式的结果串
     return json;
 }

index.html

@@ -160,7 +160,6 @@
   <script src="libs/scripts/prettify.min.js"></script>
   <script src="libs/scripts/index.js"></script>
   <script src="libs/scripts/jquery.min.js"></script>
-  <script src="libs/scripts/json5.js"></script>
 
   <script src="assets/scripts/sync-scroll.js"></script>
   <script src="assets/scripts/themes/default-theme.js"></script>