beta version

src/components/CodemirrorEditor.vue

@@ -3,6 +3,7 @@
         <el-container>
             <el-header class="top editor__header">
                 <editor-header
+                    @cssChanged="cssChanged"
                     @showBox="showBox = !showBox"
                     @showAboutDialog="aboutDialogVisible = true"
                     @showDialogForm="dialogFormVisible = true"
@@ -54,6 +55,9 @@
 import aboutDialog from './codeMirror/aboutDialog';
 import insertFormDialog from './codeMirror/insertForm';
 import {
+    setFontSize,
+    css2json,
+    customCssWithTemplate,
     saveEditorContent,
     isImageIllegal
 } from '../scripts/util'
@@ -83,6 +87,8 @@
             output: state=> state.output,
             editor: state=> state.editor,
             cssEditor: state=> state.cssEditor,
+            currentSize: state=> state.currentSize,
+            currentColor: state=> state.currentColor,
             html: state=> state.html
         })
     },
@@ -146,6 +152,16 @@
                 saveEditorContent(this.cssEditor, '__css_content')
             })
         },
+        cssChanged() {
+            let json = css2json(this.cssEditor.getValue(0))
+            let theme = setFontSize(this.currentSize.replace('px', ''))
+
+            theme = customCssWithTemplate(json, this.currentColor, theme)
+            this.setWxRendererOptions({
+                theme: theme
+            });
+            this.editorRefresh()
+        },
         // 图片上传结束
         uploaded(response, file, fileList) {
             if (response.success) {
@@ -213,7 +229,8 @@
                 }, 100)
             })
         },
-        ...mapMutations(['initEditorState', 'initEditorEntity', 'editorRefresh', 'initCssEditorEntity'])
+        ...mapMutations(['initEditorState', 'initEditorEntity', 'setWxRendererOptions',
+            'editorRefresh', 'initCssEditorEntity'])
     },
     mounted() {
         this.leftAndRightScroll()

src/components/codeMirror/header.vue

@@ -67,9 +67,7 @@
 import {
     setColorWithCustomTemplate,
     setFontSize,
-    css2json,
+    isImageIllegal
-    isImageIllegal,
-    customCssWithTemplate,
 } from '../../scripts/util'
 import {
     solveWeChatImage,
@@ -131,15 +129,6 @@ export default {
             this.setCiteStatus(val)
             this.editorRefresh()
         },
-        cssChanged() {
-            let json = css2json(this.cssEditor.getValue(0))
-            let theme = setFontSize(this.currentSize.replace('px', ''))
-            theme = customCssWithTemplate(json, this.currentColor, theme)
-            this.setWxRendererOptions({
-                theme: theme
-            });
-            this.editorRefresh()
-        },
         // 图片上传结束
         uploaded(response, file, fileList) {
             if (response.success) {
@@ -229,7 +218,7 @@ export default {
                 this.fontChanged(this.config.builtinFonts[0].value)
                 this.colorChanged(this.config.colorOption[1].value)
                 this.sizeChanged(this.config.sizeOption[2].value)
-                this.cssChanged()
+                this.$emit('cssChanged')
             }).catch(() => {
                 this.editor.focus()
             })