chore:1.修复主题无法更新的问题

2.修复文档初始化值无法动态切换的问题

README.md

@@ -134,3 +134,10 @@ const config = {
   },
 
 ```
+
+
+### 更新日志
+v0.7.0
+
+1.修复主题无法更新的问题
+2.修复文档初始化值无法动态切换的问题

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-meditor",
   "description": "一款使用marked和highlight.js开发的一款markdown编辑器",
-  "version": "0.1.1",
+  "version": "0.7.0",
   "author": "zhaoxuhui<1258835133@qq.com>",
   "license": "MIT",
   "main": "dist/index.js",

src/markdown/markdown.js

@@ -6,110 +6,110 @@ import Print from './js/print';
 hljs.initHighlightingOnLoad();
 
 marked.setOptions({
-  renderer : new marked.Renderer(),
+  renderer: new marked.Renderer(),
-  gfm : true,
+  gfm: true,
-  tables : true,
+  tables: true,
-  breaks : false,
+  breaks: false,
-  pedantic : false,
+  pedantic: false,
-  sanitize : true,
+  sanitize: true,
-  smartLists : true,
+  smartLists: true,
-  highlight : function (code) {
+  highlight: function (code) {
     return hljs.highlightAuto(code).value;
   }
 });
 
 export default {
-  name : 'markdown',
+  name: 'markdown',
-  props : {
+  props: {
-    title : { // 标题
+    title: { // 标题
-      type : String,
+      type: String,
-      default : ''
+      default: ''
     },
-    titleStyle : {// 标题样式
+    titleStyle: { // 标题样式
-      type : Object,
+      type: Object,
-      default() {
+      default () {
         return {}
       }
     },
-    theme : { // 默认主题
+    theme: { // 默认主题
-      type : String,
+      type: String,
-      default : 'Light'
+      default: 'Light'
     },
-    width : {// 宽度
+    width: { // 宽度
-      type : [Number, String],
+      type: [Number, String],
-      default : 'auto'
+      default: 'auto'
     },
-    height : { // 高度
+    height: { // 高度
-      type : Number,
+      type: Number,
-      default : 600
+      default: 600
     }, // 宽度
-    toolbars : { // 工具栏
+    toolbars: { // 工具栏
-      type : Object,
+      type: Object,
-      default() {
+      default () {
         return {};
       }
     },
-    autoSave : {// 是否自动保存
+    autoSave: { // 是否自动保存
-      type : Boolean,
+      type: Boolean,
-      default : true
+      default: true
     },
-    interval : { // 自动保存频率 单位：毫秒
+    interval: { // 自动保存频率 单位：毫秒
-      type : Number,
+      type: Number,
-      default : 10000
+      default: 10000
     },
-    initialValue : { // 初始化值
+    initialValue: { // 初始化值
-      type : String,
+      type: String,
-      default : ''
+      default: ''
     },
-    mode : { // 模式 1 分屏显示 2 预览详情 3 全屏编辑
+    mode: { // 模式 1 分屏显示 2 预览详情 3 全屏编辑
-      type : [Number, String],
+      type: [Number, String],
-      default : 1
+      default: 1
     }
   },
   data() {
     return {
-      value : '', // 输入框内容
+      value: '', // 输入框内容
-      timeoutId : null,
+      timeoutId: null,
-      hljsInit : null,
+      hljsInit: null,
-      indexLenth : 1,
+      indexLenth: 1,
-      previewMarkdown : '',
+      previewMarkdown: '',
-      preview : 1, // 是否是预览状态
+      preview: 1, // 是否是预览状态
-      isFullscreen : false,
+      isFullscreen: false,
-      scrollHeight : null,
+      scrollHeight: null,
-      scroll : 'markdown',// 哪个半栏在滑动
+      scroll: 'markdown', // 哪个半栏在滑动
-      allTools : { // 显示隐藏的工具栏
+      allTools: { // 显示隐藏的工具栏
-        strong : true,
+        strong: true,
-        italic : true,
+        italic: true,
-        overline : true,
+        overline: true,
-        h1 : true,
+        h1: true,
-        h2 : true,
+        h2: true,
-        h3 : true,
+        h3: true,
-        h4 : false,
+        h4: false,
-        h5 : false,
+        h5: false,
-        h6 : false,
+        h6: false,
-        hr : true,
+        hr: true,
-        quote : true,
+        quote: true,
-        ul : true,
+        ul: true,
-        ol : true,
+        ol: true,
-        code : true,
+        code: true,
-        link : true,
+        link: true,
-        image : true,
+        image: true,
-        table : true,
+        table: true,
-        checked : true,
+        checked: true,
-        notChecked : true,
+        notChecked: true,
-        shift : true,
+        shift: true,
-        fullscreen : true,
+        fullscreen: true,
-        print : true,
+        print: true,
-        theme : true
+        theme: true
       },
-      slideDown : false,
+      slideDown: false,
-      themeName : 'Light',// 主题名称
+      themeName: 'Light', // 主题名称
-      lastInsert : '',
+      lastInsert: '',
-      timerId : null,// 定时器id
+      timerId: null, // 定时器id
 
     };
   },
-  computed : {
+  computed: {
     editorHeight() {
       if (this.isFullscreen) {
         return window.innerHeight;
@@ -118,7 +118,10 @@ export default {
       }
     },
     tools() {
-      const {allTools, toolbars} = this;
+      const {
+        allTools,
+        toolbars
+      } = this;
       return Object.assign(allTools, toolbars)
     }
   },
@@ -129,14 +132,20 @@ export default {
     this.init();
     //this.addListener();
   },
-  methods : {
+  methods: {
     init() {
       this.themeName = this.theme;
-      const {autoSave, interval, theme, initialValue, mode} = this;
+      const {
+        autoSave,
+        interval,
+        theme,
+        initialValue,
+        mode
+      } = this;
       this.value = initialValue;
       this.preview = mode;
       this.previewMarkdown = marked(initialValue, {
-        sanitize : true
+        sanitize: true
       });
       if (autoSave) {
         this.timerId = setInterval(() => {
@@ -165,11 +174,13 @@ export default {
         markdownContent.scrollTop = parseInt((previewScrollTop / previewScrollHeight) * markdownScrollHeight);
       }
     },
-    mousescrollSide(side) {// 设置究竟是哪个半边在主动滑动
+    mousescrollSide(side) { // 设置究竟是哪个半边在主动滑动
       this.scroll = side;
     },
     insertContent(str) { // 插入文本
-      const {preview} = this;
+      const {
+        preview
+      } = this;
       if (preview === 2) {
         return;
       }
@@ -191,7 +202,7 @@ export default {
       if (document.selection) {
         textDom.focus();
         let selectRange = document.selection.createRange();
-        selectRange.moveStart('character', - this.value.length);
+        selectRange.moveStart('character', -this.value.length);
         cursorPos = selectRange.text.length;
       } else if (textDom.selectionStart || textDom.selectionStart == '0') {
         cursorPos = textDom.selectionStart;
@@ -239,12 +250,12 @@ export default {
     },
     insertTitle(level) { // 插入标题
       const titleLevel = {
-        1 : '\n#  ',
+        1: '\n#  ',
-        2 : '\n##  ',
+        2: '\n##  ',
-        3 : '\n###  ',
+        3: '\n###  ',
-        4 : '\n####  ',
+        4: '\n####  ',
-        5 : '\n#####  ',
+        5: '\n#####  ',
-        6 : '\n######  '
+        6: '\n######  '
       };
       this.insertContent(titleLevel[level]);
     },
@@ -340,12 +351,12 @@ export default {
     },
     insertTitle(level) { // 插入标题
       const titleLevel = {
-        1 : '#  ',
+        1: '#  ',
-        2 : '##  ',
+        2: '##  ',
-        3 : '###  ',
+        3: '###  ',
-        4 : '####  ',
+        4: '####  ',
-        5 : '#####  ',
+        5: '#####  ',
-        6 : '######  '
+        6: '######  '
       };
       this.insertContent(titleLevel[level]);
     },
@@ -363,23 +374,25 @@ export default {
     },
     handleSave() { // 保存操作
       this.$emit('on-save', {
-        markdownValue : this.value,
+        markdownValue: this.value,
-        htmlValue : this.previewMarkdown,
+        htmlValue: this.previewMarkdown,
-        theme : this.theme
+        theme: this.themeName
       });
     },
     insertLine() { // 插入分割线
       this.insertContent(`\n----\n`);
     },
     toggleSlideDown() { // 显示主题选项
-      this.slideDown = ! this.slideDown;
+      this.slideDown = !this.slideDown;
     },
     setThemes(name) { // 设置主题
       this.themeName = name;
       this.slideDown = false;
     },
     enter(e) { // 回车事件
-      const {lastInsert} = this;
+      const {
+        lastInsert
+      } = this;
       const list = ['-  ', '1. ', '- [ ]  ', '- [x]  ']
       if (list.includes(lastInsert)) {
         this.insertContent(lastInsert);
@@ -397,26 +410,26 @@ export default {
     },
     addListener() { // 事件监听，阻止保存
       this.removeListener();
-      document.addEventListener('keydown',this.listener)
+      document.addEventListener('keydown', this.listener)
     },
-    removeListener(){
+    removeListener() {
-      document.removeEventListener('keydown',this.listener)
+      document.removeEventListener('keydown', this.listener)
     },
-    listener(e){
+    listener(e) {
       if (e.keyCode === 83) {
-        if( e.metaKey||e.ctrlKey){
+        if (e.metaKey || e.ctrlKey) {
           e.preventDefault();
           this.handleSave();
         }
       }
     }
   },
-  watch : {
+  watch: {
     value() {
       clearTimeout(this.timeoutId);
       this.timeoutId = setTimeout(() => {
         this.previewMarkdown = marked(this.value, {
-          sanitize : true
+          sanitize: true
         });
       }, 30)
       this.indexLenth = this.value.split('\n').length;
@@ -424,6 +437,12 @@ export default {
       const height_2 = this.$refs.textarea.scrollHeight;
       const height_3 = this.$refs.preview.scrollHeight;
       this.scrollHeight = Math.max(height_1, height_2, height_3);
+    },
+    initialValue() {
+      this.value = this.initialValue;
+    },
+    theme() {
+      this.themeName = this.theme;
     }
   },
   destroyed() { // 销毁时清除定时器