From 7aae308859b4e0091cf88d3c058c58d87b3d820a Mon Sep 17 00:00:00 2001
From: JimQing <jimqing@yeah.net>
Date: Sat, 2 May 2020 12:33:44 +0800
Subject: [PATCH] beta version

---
 src/components/CodemirrorEditor.vue  | 59 ++++++++++++++++++----------
 src/components/codeMirror/header.vue | 15 +------
 2 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/src/components/CodemirrorEditor.vue b/src/components/CodemirrorEditor.vue
index 2533475..14f7f5a 100644
--- a/src/components/CodemirrorEditor.vue
+++ b/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"
@@ -38,32 +39,35 @@
     </div>
 </template>
 <script>
-  import CodeMirror from 'codemirror/lib/codemirror'
+import CodeMirror from 'codemirror/lib/codemirror'
 
-  import 'codemirror/mode/css/css'
-  import 'codemirror/mode/markdown/markdown'
-  import 'codemirror/addon/edit/matchbrackets'
-  import 'codemirror/addon/selection/active-line'
+import 'codemirror/mode/css/css'
+import 'codemirror/mode/markdown/markdown'
+import 'codemirror/addon/edit/matchbrackets'
+import 'codemirror/addon/selection/active-line'
 
-  import 'codemirror/addon/hint/show-hint.js'
-  import 'codemirror/addon/hint/css-hint.js'
-  import '../scripts/format.js'
+import 'codemirror/addon/hint/show-hint.js'
+import 'codemirror/addon/hint/css-hint.js'
+import '../scripts/format.js'
 
-  import fileApi from '../api/file';
-  import editorHeader from './codeMirror/header';
-  import aboutDialog from './codeMirror/aboutDialog';
-  import insertFormDialog from './codeMirror/insertForm';
-  import {
+import fileApi from '../api/file';
+import editorHeader from './codeMirror/header';
+import aboutDialog from './codeMirror/aboutDialog';
+import insertFormDialog from './codeMirror/insertForm';
+import {
+    setFontSize,
+    css2json,
+    customCssWithTemplate,
     saveEditorContent,
     isImageIllegal
-  } from '../scripts/util'
+} from '../scripts/util'
 
-  require('codemirror/mode/javascript/javascript')
-  import '../scripts/closebrackets'
-  import $ from 'jquery'
-  import config from '../scripts/config'
-  import {mapState, mapMutations} from 'vuex';
-  export default {
+require('codemirror/mode/javascript/javascript')
+import '../scripts/closebrackets'
+import $ from 'jquery'
+import config from '../scripts/config'
+import {mapState, mapMutations} from 'vuex';
+export default {
     data() {
         return {
             config: config,
@@ -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()
diff --git a/src/components/codeMirror/header.vue b/src/components/codeMirror/header.vue
index c590940..bd9d11d 100644
--- a/src/components/codeMirror/header.vue
+++ b/src/components/codeMirror/header.vue
@@ -67,9 +67,7 @@
 import {
     setColorWithCustomTemplate,
     setFontSize,
-    css2json,
-    isImageIllegal,
-    customCssWithTemplate,
+    isImageIllegal
 } 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()
             })