From eb72c063742b61acf7f2ae33120a873b680ea9da Mon Sep 17 00:00:00 2001
From: wangsongc <wangsongc@foxmail.com>
Date: Thu, 26 Aug 2021 11:46:01 +0800
Subject: [PATCH] fix: fix some bugs

---
 src/components/md-toolbar-left.vue |   26 +-
 src/mavon-editor.vue               | 1614 +++++++++++++++-------------
 2 files changed, 910 insertions(+), 730 deletions(-)

diff --git a/src/components/md-toolbar-left.vue b/src/components/md-toolbar-left.vue
index 0a7e95b4d..d6934d6ab 100644
--- a/src/components/md-toolbar-left.vue
+++ b/src/components/md-toolbar-left.vue
@@ -242,23 +242,27 @@
             />{{ d_words.tl_upload }}
           </div>
 
-          
-            <div v-for="(item, index) in img_file" :key="index">
-            <template v-if="item && item[1]"
+          <template v-for="(item, index) in img_file" :key="index">
+            <div
+              v-if="item && item[1]"
               class="dropdown-item dropdown-images"
               :title="item[1].name"
               @click.stop="$imgFileListClick(index)"
-              >
-              <span> {{ item[1].name }} </span>
-
+            >
+              <span>{{ item[1].name }}</span>
+              <!-- <template v-slot:right><button  type="button" @click.stop="$imgDel(index)"
+                                class="op-icon fa fa-mavon-times" aria-hidden="true"
+                                :title="d_words.tl_upload_remove"></button>
+                        </template> -->
+              <!-- 缩略图展示 -->
               <img
                 class="image-show"
                 :class="{ transition: transition }"
                 :src="item[1].miniurl"
                 alt="none"
               />
-            </template>
-        </div>
+            </div>
+          </template>
         </div>
       </transition>
     </div>
@@ -562,9 +566,9 @@ export default {
         handleClose(e) {
             this.s_img_dropdown_open = false;
         }
-    },
+        },
 
-    watch:{
+        watch:{
         s_img_link_open(newVlaue) {
           // fix issue #644
           this.$parent.$el.style.zIndex = newVlaue ? 1501 : 1500;
@@ -687,7 +691,7 @@ export default {
         z-index 3
         background #fff
         border-radius 2px
-
+        
         i
             font-size 24px
             position absolute
diff --git a/src/mavon-editor.vue b/src/mavon-editor.vue
index 90f697053..845a3469d 100644
--- a/src/mavon-editor.vue
+++ b/src/mavon-editor.vue
@@ -1,759 +1,935 @@
 <template>
-    <div :class="[{ 'fullscreen': s_fullScreen, 'shadow': boxShadow }]" class="v-note-wrapper markdown-body" :style="{'box-shadow': boxShadow ? boxShadowStyle : ''}">
-        <!--工具栏-->
-        <div class="v-note-op" v-show="toolbarsFlag" :style="{'background': toolbarsBackground}">
-            <v-md-toolbar-left ref="toolbar_left" :editable="editable" :transition="transition" :d_words="d_words"
-                               @toolbar_left_click="toolbar_left_click" @toolbar_left_addlink="toolbar_left_addlink" :toolbars="toolbars"
-                               @imgAdd="$imgAdd" @imgDel="$imgDel" @imgTouch="$imgTouch" :image_filter="imageFilter"
-                               :class="{'transition': transition}">
-                <template v-slot:left-toolbar-before><slot name="left-toolbar-before"  /></template>
-                <template v-slot:left-toolbar-after><slot name="left-toolbar-after"  /></template>
-            </v-md-toolbar-left>
-            <v-md-toolbar-right ref="toolbar_right" :d_words="d_words" @toolbar_right_click="toolbar_right_click"
-                                :toolbars="toolbars"
-                                :s_subfield="s_subfield"
-                                :s_preview_switch="s_preview_switch" :s_fullScreen="s_fullScreen"
-                                :s_html_code="s_html_code"
-                                :s_navigation="s_navigation"
-                                :class="{'transition': transition}">
-                <template v-slot:right-toolbar-before><slot name="right-toolbar-before"  /></template>
-                <template v-slot:right-toolbar-after><slot name="right-toolbar-after"  /></template>
-            </v-md-toolbar-right>
+  <div
+    :class="[{ fullscreen: s_fullScreen, shadow: boxShadow }]"
+    class="v-note-wrapper markdown-body"
+    :style="{ 'box-shadow': boxShadow ? boxShadowStyle : '' }"
+  >
+    <!--工具栏-->
+    <div
+      class="v-note-op"
+      v-show="toolbarsFlag"
+      :style="{ background: toolbarsBackground }"
+    >
+      <v-md-toolbar-left
+        ref="toolbar_left"
+        :editable="editable"
+        :transition="transition"
+        :d_words="d_words"
+        @toolbar_left_click="toolbar_left_click"
+        @toolbar_left_addlink="toolbar_left_addlink"
+        :toolbars="toolbars"
+        @imgAdd="$imgAdd"
+        @imgDel="$imgDel"
+        @imgTouch="$imgTouch"
+        :image_filter="imageFilter"
+        :class="{ transition: transition }"
+      >
+        <template v-slot:left-toolbar-before
+          ><slot name="left-toolbar-before"
+        /></template>
+        <template v-slot:left-toolbar-after
+          ><slot name="left-toolbar-after"
+        /></template>
+      </v-md-toolbar-left>
+      <v-md-toolbar-right
+        ref="toolbar_right"
+        :d_words="d_words"
+        @toolbar_right_click="toolbar_right_click"
+        :toolbars="toolbars"
+        :s_subfield="s_subfield"
+        :s_preview_switch="s_preview_switch"
+        :s_fullScreen="s_fullScreen"
+        :s_html_code="s_html_code"
+        :s_navigation="s_navigation"
+        :class="{ transition: transition }"
+      >
+        <template v-slot:right-toolbar-before
+          ><slot name="right-toolbar-before"
+        /></template>
+        <template v-slot:right-toolbar-after
+          ><slot name="right-toolbar-after"
+        /></template>
+      </v-md-toolbar-right>
+    </div>
+    <!--编辑展示区域-->
+    <div class="v-note-panel">
+      <!--编辑区-->
+      <div
+        ref="vNoteEdit"
+        @scroll="$v_edit_scroll"
+        class="v-note-edit divarea-wrapper"
+        :class="{
+          'scroll-style': s_scrollStyle,
+          'scroll-style-border-radius':
+            s_scrollStyle && !s_preview_switch && !s_html_code,
+          'single-edit': !s_preview_switch && !s_html_code,
+          'single-show':
+            (!s_subfield && s_preview_switch) || (!s_subfield && s_html_code),
+          transition: transition,
+        }"
+        @click="textAreaFocus"
+      >
+        <div
+          class="content-input-wrapper"
+          :style="{ 'background-color': editorBackground }"
+        >
+          <!-- 双栏 -->
+          <v-autoTextarea
+            ref="vNoteTextarea"
+            :placeholder="placeholder ? placeholder : d_words.start_editor"
+            class="content-input"
+            :fontSize="fontSize"
+            lineHeight="1.5"
+            v-model="d_value"
+            fullHeight
+            :style="{ 'background-color': editorBackground }"
+          ></v-autoTextarea>
         </div>
-        <!--编辑展示区域-->
-        <div class="v-note-panel">
-            <!--编辑区-->
-            <div ref="vNoteEdit" @scroll="$v_edit_scroll" class="v-note-edit divarea-wrapper"
-                 :class="{'scroll-style': s_scrollStyle, 'scroll-style-border-radius': s_scrollStyle && !s_preview_switch && !s_html_code, 'single-edit': !s_preview_switch && !s_html_code, 'single-show': (!s_subfield && s_preview_switch) || (!s_subfield && s_html_code), 'transition': transition}"
-                 @click="textAreaFocus">
-                <div class="content-input-wrapper" :style="{'background-color': editorBackground}">
-                    <!-- 双栏 -->
-                    <v-autoTextarea ref="vNoteTextarea" :placeholder="placeholder ? placeholder : d_words.start_editor"
-                                    class="content-input" :fontSize="fontSize"
-                                    lineHeight="1.5" v-model="d_value" fullHeight
-                                    :style="{'background-color': editorBackground}"></v-autoTextarea>
-                </div>
-            </div>
-            <!--展示区-->
-            <div :class="{'single-show': (!s_subfield && s_preview_switch) || (!s_subfield && s_html_code)}"
-                 v-show="s_preview_switch || s_html_code" class="v-note-show">
-                <div ref="vShowContent" v-html="d_render" v-show="!s_html_code"
-                     :class="{'scroll-style': s_scrollStyle, 'scroll-style-border-radius': s_scrollStyle}" class="v-show-content"
-                     :style="{'background-color': previewBackground}">
-                </div>
-                <div v-show="s_html_code" :class="{'scroll-style': s_scrollStyle, 'scroll-style-border-radius': s_scrollStyle}" class="v-show-content-html"
-                  :style="{'background-color': previewBackground}">
-                    {{d_render}}
-                </div>
-            </div>
-
-            <!--标题导航-->
-            <transition name="slideTop">
-                <div v-show="s_navigation" class="v-note-navigation-wrapper" :class="{'transition': transition}">
-                    <div class="v-note-navigation-title">
-                        {{d_words.navigation_title}}<i @click="toolbar_right_click('navigation')"
-                                                       class="fa fa-mavon-times v-note-navigation-close"
-                                                       aria-hidden="true"></i>
-                    </div>
-                    <div ref="navigationContent" class="v-note-navigation-content" :class="{'scroll-style': s_scrollStyle}">
-                    </div>
-                </div>
-            </transition>
+      </div>
+      <!--展示区-->
+      <div
+        :class="{
+          'single-show':
+            (!s_subfield && s_preview_switch) || (!s_subfield && s_html_code),
+        }"
+        v-show="s_preview_switch || s_html_code"
+        class="v-note-show"
+      >
+        <div
+          ref="vShowContent"
+          v-html="d_render"
+          v-show="!s_html_code"
+          :class="{
+            'scroll-style': s_scrollStyle,
+            'scroll-style-border-radius': s_scrollStyle,
+          }"
+          class="v-show-content"
+          :style="{ 'background-color': previewBackground }"
+        ></div>
+        <div
+          v-show="s_html_code"
+          :class="{
+            'scroll-style': s_scrollStyle,
+            'scroll-style-border-radius': s_scrollStyle,
+          }"
+          class="v-show-content-html"
+          :style="{ 'background-color': previewBackground }"
+        >
+          {{ d_render }}
+        </div>
+      </div>
 
+      <!--标题导航-->
+      <transition name="slideTop">
+        <div
+          v-show="s_navigation"
+          class="v-note-navigation-wrapper"
+          :class="{ transition: transition }"
+        >
+          <div class="v-note-navigation-title">
+            {{ d_words.navigation_title
+            }}<i
+              @click="toolbar_right_click('navigation')"
+              class="fa fa-mavon-times v-note-navigation-close"
+              aria-hidden="true"
+            ></i>
+          </div>
+          <div
+            ref="navigationContent"
+            class="v-note-navigation-content"
+            :class="{ 'scroll-style': s_scrollStyle }"
+          ></div>
         </div>
-        <!--帮助文档-->
-        <transition name="fade">
-            <div ref="help">
-                <div @click.self="toolbar_right_click('help')" class="v-note-help-wrapper" v-if="s_help">
-                    <div class="v-note-help-content markdown-body" :class="{'shadow': boxShadow}">
-                        <i @click.stop.prevent="toolbar_right_click('help')" class="fa fa-mavon-times"
-                           aria-hidden="true"></i>
-                        <div class="scroll-style v-note-help-show" v-html="d_help"></div>
-                    </div>
-                </div>
-            </div>
-        </transition>
-        <!-- 预览图片 -->
-        <transition name="fade">
-            <div @click="d_preview_imgsrc=null" class="v-note-img-wrapper" v-if="d_preview_imgsrc">
-                <img :src="d_preview_imgsrc" alt="none">
-            </div>
-        </transition>
-        <!--阅读模式-->
-        <div :class="{'show': s_readmodel}" class="v-note-read-model scroll-style" ref="vReadModel">
-            <div ref="vNoteReadContent" class="v-note-read-content" v-html="d_render">
-            </div>
+      </transition>
+    </div>
+    <!--帮助文档-->
+    <transition name="fade">
+      <div ref="help">
+        <div
+          @click.self="toolbar_right_click('help')"
+          class="v-note-help-wrapper"
+          v-if="s_help"
+        >
+          <div
+            class="v-note-help-content markdown-body"
+            :class="{ shadow: boxShadow }"
+          >
+            <i
+              @click.stop.prevent="toolbar_right_click('help')"
+              class="fa fa-mavon-times"
+              aria-hidden="true"
+            ></i>
+            <div class="scroll-style v-note-help-show" v-html="d_help"></div>
+          </div>
         </div>
+      </div>
+    </transition>
+    <!-- 预览图片 -->
+    <transition name="fade">
+      <div
+        @click="d_preview_imgsrc = null"
+        class="v-note-img-wrapper"
+        v-if="d_preview_imgsrc"
+      >
+        <img :src="d_preview_imgsrc" alt="none" />
+      </div>
+    </transition>
+    <!--阅读模式-->
+    <div
+      :class="{ show: s_readmodel }"
+      class="v-note-read-model scroll-style"
+      ref="vReadModel"
+    >
+      <div
+        ref="vNoteReadContent"
+        class="v-note-read-content"
+        v-html="d_render"
+      ></div>
     </div>
+  </div>
 </template>
 
 <script>
 // import tomarkdown from './lib/core/to-markdown.js'
-import {keydownListen} from './lib/core/keydown-listen.js'
-import hljsCss from './lib/core/hljs/lang.hljs.css.js'
-import hljsLangs from './lib/core/hljs/lang.hljs.js'
+import { keydownListen } from "./lib/core/keydown-listen.js";
+import hljsCss from "./lib/core/hljs/lang.hljs.css.js";
+import hljsLangs from "./lib/core/hljs/lang.hljs.js";
+import {
+  fullscreenchange,
+  /* windowResize, */
+  scrollLink,
+  insertTextAtCaret,
+  getNavigation,
+  insertTab,
+  unInsertTab,
+  insertOl,
+  insertUl,
+  insertEnter,
+  removeLine,
+  insertCodeBlock,
+  loadLink,
+  loadScript,
+  ImagePreviewListener,
+} from "./lib/core/extra-function.js";
+import { p_ObjectCopy_DEEP, stopEvent } from "./lib/util.js";
 import {
-    fullscreenchange,
-   /* windowResize, */
-    scrollLink,
-    insertTextAtCaret,
-    getNavigation,
-    insertTab,
-    unInsertTab,
-    insertOl,
-    insertUl,
-    insertEnter,
-    removeLine,
-    insertCodeBlock,
-    loadLink,
-    loadScript,
-    ImagePreviewListener
-} from './lib/core/extra-function.js'
-import {p_ObjectCopy_DEEP, stopEvent} from './lib/util.js'
-import {toolbar_left_click, toolbar_left_addlink} from './lib/toolbar_left_click.js'
-import {toolbar_right_click} from './lib/toolbar_right_click.js'
-import {CONFIG} from './lib/config.js'
-import hljs from './lib/core/highlight.js'
-import markdown from './lib/mixins/markdown.js'
+  toolbar_left_click,
+  toolbar_left_addlink,
+} from "./lib/toolbar_left_click.js";
+import { toolbar_right_click } from "./lib/toolbar_right_click.js";
+import { CONFIG } from "./lib/config.js";
+import hljs from "./lib/core/highlight.js";
+import markdown from "./lib/mixins/markdown.js";
 
-import md_toolbar_left from './components/md-toolbar-left'
-import md_toolbar_right from './components/md-toolbar-right'
-import autoTextarea from './components/auto-textarea'
-import "./lib/font/css/fontello.css"
-import './lib/css/md.css'
-const xss = require('xss');
+import md_toolbar_left from "./components/md-toolbar-left";
+import md_toolbar_right from "./components/md-toolbar-right";
+import autoTextarea from "./components/auto-textarea";
+import "./lib/font/css/fontello.css";
+import "./lib/css/md.css";
+const xss = require("xss");
 export default {
-    emits: [
-        "imgDel",
-        "change",
-        "fullScreen",
-        "readModel",
-        "previewToggle",
-        "subfieldToggle",
-        "htmlCode",
-        "helpToggle",
-        "save",
-        "navigationToggle"
-    ],
+  emits: [
+    "imgDel",
+    "change",
+    "fullScreen",
+    "readModel",
+    "previewToggle",
+    "subfieldToggle",
+    "htmlCode",
+    "helpToggle",
+    "save",
+    "navigationToggle",
+    "update:modelValue",
+  ],
 
-    mixins: [markdown],
+  mixins: [markdown],
 
-    props: {
-        scrollStyle: {  // 是否渲染滚动条样式(webkit)
-            type: Boolean,
-            default: true
-        },
-        boxShadow: { // 是否添加阴影
-            type: Boolean,
-            default: true
-        },
-        transition: { // 是否开启动画过渡
-            type: Boolean,
-            default: true
-        },
-        autofocus: { // 是否自动获取焦点
-            type: Boolean,
-            default: true
-        },
-        fontSize: { // 字体大小
-            type: String,
-            default: '14px'
-        },
-        toolbarsBackground: { // 工具栏背景色
-            type: String,
-            default: '#ffffff'
-        },
-        editorBackground: { // TODO: 编辑栏背景色
-            type: String,
-            default: '#ffffff'
-        },
-        previewBackground: { // 预览栏背景色
-            type: String,
-            default: '#fbfbfb'
-        },
-        boxShadowStyle: { // 阴影样式
-            type: String,
-            default: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
-        },
-        help: {
-            type: String,
-            default: null
-        },
-        value: { // 初始 value
-            type: String,
-            default: ''
-        },
-        language: {  // 初始语言
-            type: String,
-            default: 'zh-CN'
-        },
-        subfield: {
-            type: Boolean,
-            default: true
-        },
-        navigation: {
-            type: Boolean,
-            default: false
-        },
-        defaultOpen: {
-            type: String,
-            default: null
-        },
-        editable: { // 是否开启编辑
-            type: Boolean,
-            default: true
-        },
-        toolbarsFlag: { // 是否开启工具栏
-            type: Boolean,
-            default: true
-        },
-        toolbars: { // 工具栏
-            type: Object,
-            default() {
-                return CONFIG.toolbars
-            }
-        },
-        xssOptions: { // 工具栏
-            type: Object,
-            default() {
-                return null
-            }
-        },
-        codeStyle: { // <code></code> 样式
-            type: String,
-            default() {
-                return 'github';
-            }
-        },
-        placeholder: { // 编辑器默认内容
-            type: String,
-            default: null
-        },
-        ishljs: {
-            type: Boolean,
-            default: true
-        },
-        externalLink: {
-            type: [Object, Boolean],
-            default: true
-        },
-        imageFilter: {
-            type: Function,
-            default: null
-        },
-        imageClick: {
-            type: Function,
-            default: null
-        },
-        tabSize: {
-            type: Number,
-            default: 0
-        },
-        shortCut:{
-            type: Boolean,
-            default: true
-        }
+  props: {
+    scrollStyle: {
+      // 是否渲染滚动条样式(webkit)
+      type: Boolean,
+      default: true,
     },
-
-    data() {
-        return {
-            s_right_click_menu_show: false,
-            right_click_menu_top: 0,
-            right_click_menu_left: 0,
-            s_subfield: (() => {
-                return this.subfield;
-            })(),
-            s_autofocus: true,
-            // 标题导航
-            s_navigation: (() => {
-                return this.navigation;
-            })(),
-            s_scrollStyle: (() => {
-                return this.scrollStyle
-            })(),// props 是否渲染滚动条样式
-            d_value: '',// props 文本内容
-            d_render: '',// props 文本内容render
-            s_preview_switch: (() => {
-                let default_open_ = this.defaultOpen;
-                if (!default_open_) {
-                    default_open_ = this.subfield ? 'preview' : 'edit';
-                }
-                return default_open_ === 'preview' ? true : false;
-            })(), // props true 展示编辑 false展示预览
-            s_fullScreen: false,// 全屏编辑标志
-            s_help: false,// markdown帮助
-            s_html_code: false,// 分栏情况下查看html
-            d_help: null,
-            d_words: null,
-            edit_scroll_height: -1,
-            s_readmodel: false,
-            s_table_enter: false, // 回车事件是否在表格中执行
-            d_history: (() => {
-                let temp_array = []
-                temp_array.push(this.value)
-                return temp_array;
-            })(), // 编辑记录
-            d_history_index: 0, // 编辑记录索引
-            currentTimeout: '',
-            d_image_file: [],
-            d_preview_imgsrc: null, // 图片预览地址
-            s_external_link: {
-                markdown_css: function() {
-                    return 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.9.0/github-markdown.min.css';
-                },
-                hljs_js: function() {
-                    return 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js';
-                },
-                hljs_lang: function(lang) {
-                    return 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/' + lang + '.min.js';
-                },
-                hljs_css: function(css) {
-                    if (hljsCss[css]) {
-                        return 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/' + css + '.min.css';
-                    }
-                    return '';
-                },
-                katex_js: function() {
-                    return 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.js';
-                },
-                katex_css: function() {
-                    return 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.css';
-                }
-            },
-            p_external_link: {},
-            textarea_selectionEnd: 0,
-            textarea_selectionEnds: [0]
-        };
+    boxShadow: {
+      // 是否添加阴影
+      type: Boolean,
+      default: true,
     },
-
-    created() {
-        var $vm = this;
-        // 初始化语言
-        this.initLanguage();
-        this.initExternalFuc();
-        this.$nextTick(() => {
-            // 初始化Textarea编辑开关
-            $vm.editableTextarea();
-        })
+    transition: {
+      // 是否开启动画过渡
+      type: Boolean,
+      default: true,
+    },
+    autofocus: {
+      // 是否自动获取焦点
+      type: Boolean,
+      default: true,
+    },
+    fontSize: {
+      // 字体大小
+      type: String,
+      default: "14px",
+    },
+    toolbarsBackground: {
+      // 工具栏背景色
+      type: String,
+      default: "#ffffff",
+    },
+    editorBackground: {
+      // TODO: 编辑栏背景色
+      type: String,
+      default: "#ffffff",
+    },
+    previewBackground: {
+      // 预览栏背景色
+      type: String,
+      default: "#fbfbfb",
+    },
+    boxShadowStyle: {
+      // 阴影样式
+      type: String,
+      default: "0 2px 12px 0 rgba(0, 0, 0, 0.1)",
+    },
+    help: {
+      type: String,
+      default: null,
+    },
+    modelValue: {
+      // 初始 value
+      type: String,
+      default: "",
+    },
+    language: {
+      // 初始语言
+      type: String,
+      default: "zh-CN",
+    },
+    subfield: {
+      type: Boolean,
+      default: true,
     },
+    navigation: {
+      type: Boolean,
+      default: false,
+    },
+    defaultOpen: {
+      type: String,
+      default: null,
+    },
+    editable: {
+      // 是否开启编辑
+      type: Boolean,
+      default: true,
+    },
+    toolbarsFlag: {
+      // 是否开启工具栏
+      type: Boolean,
+      default: true,
+    },
+    toolbars: {
+      // 工具栏
+      type: Object,
+      default() {
+        return CONFIG.toolbars;
+      },
+    },
+    xssOptions: {
+      // 工具栏
+      type: Object,
+      default() {
+        return null;
+      },
+    },
+    codeStyle: {
+      // <code></code> 样式
+      type: String,
+      default() {
+        return "github";
+      },
+    },
+    placeholder: {
+      // 编辑器默认内容
+      type: String,
+      default: null,
+    },
+    ishljs: {
+      type: Boolean,
+      default: true,
+    },
+    externalLink: {
+      type: [Object, Boolean],
+      default: true,
+    },
+    imageFilter: {
+      type: Function,
+      default: null,
+    },
+    imageClick: {
+      type: Function,
+      default: null,
+    },
+    tabSize: {
+      type: Number,
+      default: 0,
+    },
+    shortCut: {
+      type: Boolean,
+      default: true,
+    },
+  },
 
-    mounted() {
-        var $vm = this;
-        this.$el.addEventListener('paste', function (e) {
-            $vm.$paste(e);
-        })
-        this.$el.addEventListener('drop', function (e) {
-            $vm.$drag(e);
-        })
-        // 浏览器siz大小
-       /* windowResize(this); */
-        keydownListen(this);
-        // 图片预览事件监听
-        ImagePreviewListener(this);
-        // 设置默认焦点
-        if (this.autofocus) {
-            this.getTextareaDom().focus();
+  data() {
+    return {
+      s_right_click_menu_show: false,
+      right_click_menu_top: 0,
+      right_click_menu_left: 0,
+      s_subfield: (() => {
+        return this.subfield;
+      })(),
+      s_autofocus: true,
+      // 标题导航
+      s_navigation: (() => {
+        return this.navigation;
+      })(),
+      s_scrollStyle: (() => {
+        return this.scrollStyle;
+      })(), // props 是否渲染滚动条样式
+      d_value: "", // props 文本内容
+      d_render: "", // props 文本内容render
+      s_preview_switch: (() => {
+        let default_open_ = this.defaultOpen;
+        if (!default_open_) {
+          default_open_ = this.subfield ? "preview" : "edit";
         }
-        // fullscreen事件
-        fullscreenchange(this);
-        this.d_value = this.value || "";
-        // 将help添加到末尾
-        document.body.appendChild(this.$refs.help);
-        this.loadExternalLink('markdown_css', 'css');
-        this.loadExternalLink('katex_css', 'css')
-        this.loadExternalLink('katex_js', 'js', function() {
-            $vm.iRender(true);
-        })
-        this.loadExternalLink('hljs_js', 'js', function() {
-            $vm.iRender(true);
-        })
+        return default_open_ === "preview" ? true : false;
+      })(), // props true 展示编辑 false展示预览
+      s_fullScreen: false, // 全屏编辑标志
+      s_help: false, // markdown帮助
+      s_html_code: false, // 分栏情况下查看html
+      d_help: null,
+      d_words: null,
+      edit_scroll_height: -1,
+      s_readmodel: false,
+      s_table_enter: false, // 回车事件是否在表格中执行
+      d_history: (() => {
+        let temp_array = [];
+        temp_array.push(this.modelValue);
+        return temp_array;
+      })(), // 编辑记录
+      d_history_index: 0, // 编辑记录索引
+      currentTimeout: "",
+      d_image_file: [],
+      d_preview_imgsrc: null, // 图片预览地址
+      s_external_link: {
+        markdown_css: function () {
+          return "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.9.0/github-markdown.min.css";
+        },
+        hljs_js: function () {
+          return "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js";
+        },
+        hljs_lang: function (lang) {
+          return (
+            "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/" +
+            lang +
+            ".min.js"
+          );
+        },
+        hljs_css: function (css) {
+          if (hljsCss[css]) {
+            return (
+              "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/" +
+              css +
+              ".min.css"
+            );
+          }
+          return "";
+        },
+        katex_js: function () {
+          return "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.js";
+        },
+        katex_css: function () {
+          return "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.css";
+        },
+      },
+      p_external_link: {},
+      textarea_selectionEnd: 0,
+      textarea_selectionEnds: [0],
+    };
+  },
+
+  created() {
+    var $vm = this;
+    // 初始化语言
+    this.initLanguage();
+    this.initExternalFuc();
+    this.$nextTick(() => {
+      // 初始化Textarea编辑开关
+      $vm.editableTextarea();
+    });
+  },
+
+  mounted() {
+    var $vm = this;
+    this.$el.addEventListener("paste", function (e) {
+      $vm.$paste(e);
+    });
+    this.$el.addEventListener("drop", function (e) {
+      $vm.$drag(e);
+    });
+    // 浏览器siz大小
+    /* windowResize(this); */
+    keydownListen(this);
+    // 图片预览事件监听
+    ImagePreviewListener(this);
+    // 设置默认焦点
+    if (this.autofocus) {
+      this.getTextareaDom().focus();
+    }
+    // fullscreen事件
+    fullscreenchange(this);
+    this.d_value = this.modelValue || "";
+    // 将help添加到末尾
+    document.body.appendChild(this.$refs.help);
+    this.loadExternalLink("markdown_css", "css");
+    this.loadExternalLink("katex_css", "css");
+    this.loadExternalLink("katex_js", "js", function () {
+      $vm.iRender(true);
+    });
+    this.loadExternalLink("hljs_js", "js", function () {
+      $vm.iRender(true);
+    });
 
-        if (!(typeof $vm.externalLink === 'object' && typeof $vm.externalLink['markdown_css'] === 'function')) {
-            // 没有外部文件要来接管markdown样式，可以更改markdown样式。
-            $vm.codeStyleChange($vm.codeStyle, true)
+    if (
+      !(
+        typeof $vm.externalLink === "object" &&
+        typeof $vm.externalLink["markdown_css"] === "function"
+      )
+    ) {
+      // 没有外部文件要来接管markdown样式，可以更改markdown样式。
+      $vm.codeStyleChange($vm.codeStyle, true);
+    }
+  },
+
+  beforeUnmount() {
+    document.body.removeChild(this.$refs.help);
+  },
+
+  getMarkdownIt() {
+    return this.mixins[0].data().markdownIt;
+  },
+
+  methods: {
+    loadExternalLink(name, type, callback) {
+      if (typeof this.p_external_link[name] !== "function") {
+        if (this.p_external_link[name] !== false) {
+          console.error(
+            "external_link." + name,
+            "is not a function, if you want to disabled this error log, set external_link." +
+              name,
+            "to function or false"
+          );
         }
+        return;
+      }
+      var _obj = {
+        css: loadLink,
+        js: loadScript,
+      };
+      if (_obj.hasOwnProperty(type)) {
+        _obj[type](this.p_external_link[name](), callback);
+      }
     },
-
-    beforeUnmount() {
-        document.body.removeChild(this.$refs.help);
+    initExternalFuc() {
+      var $vm = this;
+      var _external_ = [
+        "markdown_css",
+        "hljs_js",
+        "hljs_css",
+        "hljs_lang",
+        "katex_js",
+        "katex_css",
+      ];
+      var _type_ = typeof $vm.externalLink;
+      var _is_object = _type_ === "object";
+      var _is_boolean = _type_ === "boolean";
+      for (var i = 0; i < _external_.length; i++) {
+        if (
+          (_is_boolean && !$vm.externalLink) ||
+          (_is_object && $vm.externalLink[_external_[i]] === false)
+        ) {
+          $vm.p_external_link[_external_[i]] = false;
+        } else if (
+          _is_object &&
+          typeof $vm.externalLink[_external_[i]] === "function"
+        ) {
+          $vm.p_external_link[_external_[i]] = $vm.externalLink[_external_[i]];
+        } else {
+          $vm.p_external_link[_external_[i]] =
+            $vm.s_external_link[_external_[i]];
+        }
+      }
     },
-
-    getMarkdownIt() {
-        return this.mixins[0].data().markdownIt
+    textAreaFocus() {
+      this.$refs.vNoteTextarea.$refs.vTextarea.focus();
     },
+    $drag($e) {
+      var dataTransfer = $e.dataTransfer;
+      if (dataTransfer) {
+        var files = dataTransfer.files;
+        if (files.length > 0) {
+          $e.preventDefault();
+          this.$refs.toolbar_left.$imgFilesAdd(files);
+        }
+      }
+    },
+    $paste($e) {
+      var clipboardData = $e.clipboardData;
+      if (clipboardData) {
+        var items = clipboardData.items;
+        if (!items) return;
+        var types = clipboardData.types || [];
+        var item = null;
+        for (var i = 0; i < types.length; i++) {
+          if (types[i] === "Files") {
+            item = items[i];
+            break;
+          }
+        }
+        if (item && item.kind === "file") {
+          // prevent filename being pasted parallel along
+          // with the image pasting process
+          stopEvent($e);
+          var oFile = item.getAsFile();
+          this.$refs.toolbar_left.$imgFilesAdd([oFile]);
+        }
+      }
+    },
+    $imgTouch(file) {
+      var $vm = this;
+      // TODO 跳转到图片位置
+    },
+    $imgDel(file) {
+      this.markdownIt.image_del(file[1]);
+      // 删除所有markdown中的图片
+      let fileReg = file[0];
+      let reg = new RegExp(`\\!\\[${file[1]._name}\\]\\(${fileReg}\\)`, "g");
 
-    methods: {
-        loadExternalLink(name, type, callback) {
-            if (typeof this.p_external_link[name] !== 'function') {
-                if (this.p_external_link[name] !== false) {
-                    console.error('external_link.' + name, 'is not a function, if you want to disabled this error log, set external_link.' + name, 'to function or false');
-                }
-                return;
-            }
-            var _obj = {
-                'css': loadLink,
-                'js': loadScript
-            };
-            if (_obj.hasOwnProperty(type)) {
-                _obj[type](this.p_external_link[name](), callback);
-            }
-        },
-        initExternalFuc() {
-            var $vm = this;
-            var _external_ = ['markdown_css', 'hljs_js', 'hljs_css', 'hljs_lang', 'katex_js', 'katex_css'];
-            var _type_ = typeof $vm.externalLink;
-            var _is_object = (_type_ === 'object');
-            var _is_boolean = (_type_ === 'boolean');
-            for (var i = 0; i < _external_.length; i++) {
-                if ((_is_boolean && !$vm.externalLink) || (_is_object && $vm.externalLink[_external_[i]] === false)) {
-                    $vm.p_external_link[_external_[i]] = false;
-                } else if (_is_object && typeof $vm.externalLink[_external_[i]] === 'function') {
-                    $vm.p_external_link[_external_[i]] = $vm.externalLink[_external_[i]];
-                } else {
-                    $vm.p_external_link[_external_[i]] = $vm.s_external_link[_external_[i]];
-                }
-            }
-        },
-        textAreaFocus() {
-            this.$refs.vNoteTextarea.$refs.vTextarea.focus();
-        },
-        $drag($e) {
-            var dataTransfer = $e.dataTransfer;
-            if (dataTransfer) {
-                var files = dataTransfer.files;
-                if (files.length > 0) {
-                    $e.preventDefault();
-                    this.$refs.toolbar_left.$imgFilesAdd(files);
-                }
-            }
-        },
-        $paste($e) {
-            var clipboardData = $e.clipboardData;
-            if (clipboardData) {
-                var items = clipboardData.items;
-                if (!items) return;
-                var types = clipboardData.types || [];
-                var item = null;
-                for (var i = 0; i < types.length; i++) {
-                    if (types[i] === 'Files') {
-                        item = items[i];
-                        break;
-                    }
-                }
-                if (item && item.kind === 'file') {
-                    // prevent filename being pasted parallel along
-                    // with the image pasting process
-                    stopEvent($e)
-                    var oFile = item.getAsFile();
-                    this.$refs.toolbar_left.$imgFilesAdd([oFile]);
-                }
-            }
-        },
-        $imgTouch(file) {
-            var $vm = this;
-            // TODO 跳转到图片位置
-        },
-        $imgDel(file) {
-            this.markdownIt.image_del(file[1]);
-            // 删除所有markdown中的图片
-            let fileReg = file[0]
-            let reg = new RegExp(`\\!\\[${file[1]._name}\\]\\(${fileReg}\\)`, "g")
-
-            this.d_value = this.d_value.replace(reg, '');
-            this.iRender();
-            this.$emit('imgDel', file);
-        },
-        $imgAdd(pos, $file, isinsert) {
-            if (isinsert === undefined) isinsert = true;
-            var $vm = this;
-            if (this.__rFilter == null) {
-                // this.__rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
-                this.__rFilter = /^image\//i;
-            }
-            this.__oFReader = new FileReader();
-            this.__oFReader.onload = function (oFREvent) {
-                $vm.markdownIt.image_add(pos, oFREvent.target.result);
-                $file.miniurl = oFREvent.target.result;
-                if (isinsert === true) {
-                    // 去除特殊字符
-                    $file._name = $file.name.replace(/[\[\]\(\)\+\{\}&\|\\\*^%$#@\-]/g, '');
+      this.d_value = this.d_value.replace(reg, "");
+      this.iRender();
+      this.$emit("imgDel", file);
+    },
+    $imgAdd(pos, $file, isinsert) {
+      if (isinsert === undefined) isinsert = true;
+      var $vm = this;
+      if (this.__rFilter == null) {
+        // this.__rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
+        this.__rFilter = /^image\//i;
+      }
+      this.__oFReader = new FileReader();
+      this.__oFReader.onload = function (oFREvent) {
+        $vm.markdownIt.image_add(pos, oFREvent.target.result);
+        $file.miniurl = oFREvent.target.result;
+        if (isinsert === true) {
+          // 去除特殊字符
+          $file._name = $file.name.replace(
+            /[\[\]\(\)\+\{\}&\|\\\*^%$#@\-]/g,
+            ""
+          );
 
-                    $vm.insertText($vm.getTextareaDom(),
-                        {
-                            prefix: '![' + $file._name + '](' + pos + ')',
-                            subfix: '',
-                            str: ''
-                        });
-                    $vm.$nextTick(function () {
-                        $vm.$emit('imgAdd', pos, $file);
-                    })
-                }
-            }
-            if ($file) {
-                var oFile = $file;
-                if (this.__rFilter.test(oFile.type)) {
-                    this.__oFReader.readAsDataURL(oFile);
-                }
-            }
-        },
-        $imgUpdateByUrl(pos, url) {
-            var $vm = this;
-            this.markdownIt.image_add(pos, url);
-            this.$nextTick(function () {
-                $vm.d_render = this.markdownIt.render(this.d_value);
-            })
-        },
-        $imgAddByUrl(pos, url) {
-            if (this.$refs.toolbar_left.$imgAddByUrl(pos, url)) {
-                this.$imgUpdateByUrl(pos, url);
-                return true;
-            }
-            return false;
-        },
-        $img2Url(fileIndex, url) {
-            // x.replace(/(\[[^\[]*?\](?=\())\(\s*(\.\/2)\s*\)/g, "$1(http://path/to/png.png)")
-            var reg_str = "/(!\\[\[^\\[\]*?\\]\(?=\\(\)\)\\(\\s*\(" + fileIndex + "\)\\s*\\)/g"
-            var reg = eval(reg_str);
-            this.d_value = this.d_value.replace(reg, "$1(" + url + ")")
-            this.$refs.toolbar_left.$changeUrl(fileIndex, url)
-            this.iRender()
-        },
-        $imglst2Url(imglst) {
-            if (imglst instanceof Array) {
-                for (var i = 0; i < imglst.length; i++) {
-                    this.$img2Url(imglst[i][0], imglst[i][1]);
-                }
-            }
-        },
-        toolbar_left_click(_type) {
-            toolbar_left_click(_type, this);
-        },
-        toolbar_left_addlink(_type, text, link) {
-            toolbar_left_addlink(_type, text, link, this);
-        },
-        toolbar_right_click(_type) {
-            toolbar_right_click(_type, this);
-        },
-        getNavigation($vm, full) {
-            return getNavigation($vm, full);
-        },
-        // @event
-        // 修改数据触发 （val ， val_render）
-        change(val, render) {
-            this.$emit('change', val, render)
-        },
-        // 切换全屏触发 （status , val）
-        fullscreen(status, val) {
-            this.$emit('fullScreen', status, val)
-        },
-        // 打开阅读模式触发（status , val）
-        readmodel(status, val) {
-            this.$emit('readModel', status, val)
-        },
-        // 切换阅读编辑触发 （status , val）
-        previewtoggle(status, val) {
-            this.$emit('previewToggle', status, val)
-        },
-        // 切换分栏触发 （status , val）
-        subfieldtoggle(status, val) {
-            this.$emit('subfieldToggle', status, val)
-        },
-        // 切换htmlcode触发 （status , val）
-        htmlcode(status, val) {
-            this.$emit('htmlCode', status, val)
-        },
-        // 打开 , 关闭 help触发 （status , val）
-        helptoggle(status, val) {
-            this.$emit('helpToggle', status, val)
-        },
-        // 监听ctrl + s
-        save(val, render) {
-            this.$emit('save', val, render)
-        },
-        // 导航栏切换
-        navigationtoggle(status, val) {
-            this.$emit('navigationToggle', status, val)
-        },
-        $toolbar_right_read_change_status() {
-            this.s_readmodel = !this.s_readmodel
-            if (this.readmodel) {
-                this.readmodel(this.s_readmodel, this.d_value)
-            }
-            if (this.s_readmodel && this.toolbars.navigation) {
-                this.getNavigation(this, true)
-            }
-        },
-        // ---------------------------------------
-        // 滚动条联动
-        $v_edit_scroll($event) {
-            scrollLink($event, this);
-        },
-        // 获取textarea dom节点
-        getTextareaDom() {
-            return this.$refs.vNoteTextarea.$refs.vTextarea;
-        },
-        // 工具栏插入内容
-        insertText(obj, {prefix, subfix, str, type}) {
-            // if (this.s_preview_switch) {
+          $vm.insertText($vm.getTextareaDom(), {
+            prefix: "![" + $file._name + "](" + pos + ")",
+            subfix: "",
+            str: "",
+          });
+          $vm.$nextTick(function () {
+            $vm.$emit("imgAdd", pos, $file);
+          });
+        }
+      };
+      if ($file) {
+        var oFile = $file;
+        if (this.__rFilter.test(oFile.type)) {
+          this.__oFReader.readAsDataURL(oFile);
+        }
+      }
+    },
+    $imgUpdateByUrl(pos, url) {
+      var $vm = this;
+      this.markdownIt.image_add(pos, url);
+      this.$nextTick(function () {
+        $vm.d_render = this.markdownIt.render(this.d_value);
+      });
+    },
+    $imgAddByUrl(pos, url) {
+      if (this.$refs.toolbar_left.$imgAddByUrl(pos, url)) {
+        this.$imgUpdateByUrl(pos, url);
+        return true;
+      }
+      return false;
+    },
+    $img2Url(fileIndex, url) {
+      // x.replace(/(\[[^\[]*?\](?=\())\(\s*(\.\/2)\s*\)/g, "$1(http://path/to/png.png)")
+      var reg_str =
+        "/(!\\[\[^\\[\]*?\\]\(?=\\(\)\)\\(\\s*\(" + fileIndex + "\)\\s*\\)/g";
+      var reg = eval(reg_str);
+      this.d_value = this.d_value.replace(reg, "$1(" + url + ")");
+      this.$refs.toolbar_left.$changeUrl(fileIndex, url);
+      this.iRender();
+    },
+    $imglst2Url(imglst) {
+      if (imglst instanceof Array) {
+        for (var i = 0; i < imglst.length; i++) {
+          this.$img2Url(imglst[i][0], imglst[i][1]);
+        }
+      }
+    },
+    toolbar_left_click(_type) {
+      toolbar_left_click(_type, this);
+    },
+    toolbar_left_addlink(_type, text, link) {
+      toolbar_left_addlink(_type, text, link, this);
+    },
+    toolbar_right_click(_type) {
+      toolbar_right_click(_type, this);
+    },
+    getNavigation($vm, full) {
+      return getNavigation($vm, full);
+    },
+    // @event
+    // 修改数据触发 （val ， val_render）
+    change(val, render) {
+      this.$emit("change", val, render);
+    },
+    // 切换全屏触发 （status , val）
+    fullscreen(status, val) {
+      this.$emit("fullScreen", status, val);
+    },
+    // 打开阅读模式触发（status , val）
+    readmodel(status, val) {
+      this.$emit("readModel", status, val);
+    },
+    // 切换阅读编辑触发 （status , val）
+    previewtoggle(status, val) {
+      this.$emit("previewToggle", status, val);
+    },
+    // 切换分栏触发 （status , val）
+    subfieldtoggle(status, val) {
+      this.$emit("subfieldToggle", status, val);
+    },
+    // 切换htmlcode触发 （status , val）
+    htmlcode(status, val) {
+      this.$emit("htmlCode", status, val);
+    },
+    // 打开 , 关闭 help触发 （status , val）
+    helptoggle(status, val) {
+      this.$emit("helpToggle", status, val);
+    },
+    // 监听ctrl + s
+    save(val, render) {
+      this.$emit("save", val, render);
+    },
+    // 导航栏切换
+    navigationtoggle(status, val) {
+      this.$emit("navigationToggle", status, val);
+    },
+    $toolbar_right_read_change_status() {
+      this.s_readmodel = !this.s_readmodel;
+      if (this.readmodel) {
+        this.readmodel(this.s_readmodel, this.d_value);
+      }
+      if (this.s_readmodel && this.toolbars.navigation) {
+        this.getNavigation(this, true);
+      }
+    },
+    // ---------------------------------------
+    // 滚动条联动
+    $v_edit_scroll($event) {
+      scrollLink($event, this);
+    },
+    // 获取textarea dom节点
+    getTextareaDom() {
+      return this.$refs.vNoteTextarea.$refs.vTextarea;
+    },
+    // 工具栏插入内容
+    insertText(obj, { prefix, subfix, str, type }) {
+      // if (this.s_preview_switch) {
 
-            insertTextAtCaret(obj, {prefix, subfix, str, type}, this);
-        },
-        insertTab() {
-            insertTab(this, this.tabSize)
-        },
-        insertOl() {
-            insertOl(this)
-        },
-        removeLine() {
-            removeLine(this)
-        },
-        insertUl() {
-            insertUl(this)
-        },
-        unInsertTab() {
-            unInsertTab(this, this.tabSize)
-        },
-        insertCodeBlock() {
-            insertCodeBlock(this);
-        },
-        insertEnter(event) {
-            insertEnter(this, event)
-        },
-        saveHistory() {
-            this.d_history.splice(this.d_history_index + 1, this.d_history.length)
-            this.d_history.push(this.d_value)
-            this.textarea_selectionEnds.splice(this.d_history_index + 1, this.textarea_selectionEnds.length)
-            this.textarea_selectionEnds.push(this.textarea_selectionEnd)
-            this.d_history_index = this.d_history.length - 1
-        },
-        saveSelectionEndsHistory() {
-            const textarea = this.$refs.vNoteTextarea && this.$refs.vNoteTextarea.$el.querySelector('textarea');
-            this.textarea_selectionEnd = textarea ? textarea.selectionEnd : this.textarea_selectionEnd;
-        },
-        initLanguage() {
-            let lang = CONFIG.langList.indexOf(this.language) >= 0 ? this.language : 'zh-CN';
-            var $vm = this;
-            $vm.$render(CONFIG[`help_${lang}`], function(res) {
-                $vm.d_help = res;
-            })
-            this.d_words = CONFIG[`words_${lang}`];
-        },
-        // 编辑开关
-        editableTextarea() {
-            let text_dom = this.$refs.vNoteTextarea.$refs.vTextarea;
-            if (this.editable) {
-                text_dom.removeAttribute('disabled');
-            } else {
-                text_dom.setAttribute('disabled', 'disabled');
-            }
-        },
-        codeStyleChange(val, isInit) {
-            isInit = isInit ? isInit : false;
-            if (typeof this.p_external_link.hljs_css !== 'function') {
-                if (this.p_external_link.hljs_css !== false)
-                { console.error('external_link.hljs_css is not a function, if you want to disabled this error log, set external_link.hljs_css to function or false'); }
-                return;
-            }
-            var url = this.p_external_link.hljs_css(val);
-            if (url.length === 0 && isInit) {
-                console.warn('hljs color scheme', val, 'do not exist, loading default github');
-                url = this.p_external_link.hljs_css('github')
-            }
-            if (url.length > 0) {
-                loadLink(url,null,"md-code-style");
-            } else {
-                console.warn('hljs color scheme', val, 'do not exist, hljs color scheme will not change');
-            }
-        },
-        iRender(toggleChange) {
-            var $vm = this;
-            this.$render($vm.d_value, function(res) {
-                // render
-                $vm.d_render = res;
-                // change回调  toggleChange == false 时候触发change回调
-                if (!toggleChange)
-                {
-                    if ($vm.change) $vm.change($vm.d_value, $vm.d_render);
-                }
-                // 改变标题导航
-                if ($vm.s_navigation) getNavigation($vm, false);
-                // v-model 语法糖
-                $vm.$emit('input', $vm.d_value)
-                // 塞入编辑记录数组
-                if ($vm.d_value === $vm.d_history[$vm.d_history_index]) return
-                window.clearTimeout($vm.currentTimeout)
-                $vm.currentTimeout = setTimeout(() => {
-                    $vm.saveHistory();
-                }, 500);
-            })
-        },
-        // 清空上一步 下一步缓存
-        $emptyHistory() {
-            this.d_history = [this.d_value] // 编辑记录
-            this.d_history_index = 0 // 编辑记录索引
+      insertTextAtCaret(obj, { prefix, subfix, str, type }, this);
+    },
+    insertTab() {
+      insertTab(this, this.tabSize);
+    },
+    insertOl() {
+      insertOl(this);
+    },
+    removeLine() {
+      removeLine(this);
+    },
+    insertUl() {
+      insertUl(this);
+    },
+    unInsertTab() {
+      unInsertTab(this, this.tabSize);
+    },
+    insertCodeBlock() {
+      insertCodeBlock(this);
+    },
+    insertEnter(event) {
+      insertEnter(this, event);
+    },
+    saveHistory() {
+      this.d_history.splice(this.d_history_index + 1, this.d_history.length);
+      this.d_history.push(this.d_value);
+      this.textarea_selectionEnds.splice(
+        this.d_history_index + 1,
+        this.textarea_selectionEnds.length
+      );
+      this.textarea_selectionEnds.push(this.textarea_selectionEnd);
+      this.d_history_index = this.d_history.length - 1;
+    },
+    saveSelectionEndsHistory() {
+      const textarea =
+        this.$refs.vNoteTextarea &&
+        this.$refs.vNoteTextarea.$el.querySelector("textarea");
+      this.textarea_selectionEnd = textarea
+        ? textarea.selectionEnd
+        : this.textarea_selectionEnd;
+    },
+    initLanguage() {
+      let lang =
+        CONFIG.langList.indexOf(this.language) >= 0 ? this.language : "zh-CN";
+      var $vm = this;
+      $vm.$render(CONFIG[`help_${lang}`], function (res) {
+        $vm.d_help = res;
+      });
+      this.d_words = CONFIG[`words_${lang}`];
+    },
+    // 编辑开关
+    editableTextarea() {
+      let text_dom = this.$refs.vNoteTextarea.$refs.vTextarea;
+      if (this.editable) {
+        text_dom.removeAttribute("disabled");
+      } else {
+        text_dom.setAttribute("disabled", "disabled");
+      }
+    },
+    codeStyleChange(val, isInit) {
+      isInit = isInit ? isInit : false;
+      if (typeof this.p_external_link.hljs_css !== "function") {
+        if (this.p_external_link.hljs_css !== false) {
+          console.error(
+            "external_link.hljs_css is not a function, if you want to disabled this error log, set external_link.hljs_css to function or false"
+          );
+        }
+        return;
+      }
+      var url = this.p_external_link.hljs_css(val);
+      if (url.length === 0 && isInit) {
+        console.warn(
+          "hljs color scheme",
+          val,
+          "do not exist, loading default github"
+        );
+        url = this.p_external_link.hljs_css("github");
+      }
+      if (url.length > 0) {
+        loadLink(url, null, "md-code-style");
+      } else {
+        console.warn(
+          "hljs color scheme",
+          val,
+          "do not exist, hljs color scheme will not change"
+        );
+      }
+    },
+    iRender(toggleChange) {
+      var $vm = this;
+      this.$render($vm.d_value, function (res) {
+        // render
+        $vm.d_render = res;
+        // change回调  toggleChange == false 时候触发change回调
+        if (!toggleChange) {
+          if ($vm.change) $vm.change($vm.d_value, $vm.d_render);
         }
+        // 改变标题导航
+        if ($vm.s_navigation) getNavigation($vm, false);
+        // v-model 语法糖
+        $vm.$emit("update:modelValue", $vm.d_value);
+        // 塞入编辑记录数组
+        if ($vm.d_value === $vm.d_history[$vm.d_history_index]) return;
+        window.clearTimeout($vm.currentTimeout);
+        $vm.currentTimeout = setTimeout(() => {
+          $vm.saveHistory();
+        }, 500);
+      });
     },
+    // 清空上一步 下一步缓存
+    $emptyHistory() {
+      this.d_history = [this.d_value]; // 编辑记录
+      this.d_history_index = 0; // 编辑记录索引
+    },
+  },
 
-    watch: {
-        d_value: function (val, oldVal) {
-            this.saveSelectionEndsHistory();
-            this.iRender();
-        },
-        value: function (val, oldVal) {
-            // Escaping all XSS characters
-            //         escapeHtml (html) {
-            //             return html
-            //         }
-            if (this.xssOptions) {
-                val = xss(val, this.xssOptions);
-            }
+  watch: {
+    d_value: function (val, oldVal) {
+      this.saveSelectionEndsHistory();
+      this.iRender();
+    },
+    modelValue: function (val, oldVal) {
+      // Escaping all XSS characters
+      //         escapeHtml (html) {
+      //             return html
+      //         }
+      if (this.xssOptions) {
+        val = xss(val, this.xssOptions);
+      }
 
-            if (val !== this.d_value) {
-                this.d_value = val
-            }
-        },
-        subfield: function (val, oldVal) {
-            this.s_subfield = val
-        },
-        d_history_index() {
-            if (this.d_history_index > 20) {
-                this.d_history.shift()
-                this.d_history_index = this.d_history_index - 1
-            }
-            this.d_value = this.d_history[this.d_history_index]
-        },
-        language: function (val) {
-            this.initLanguage();
-        },
-        editable: function () {
-            this.editableTextarea();
-        },
-        defaultOpen: function (val) {
-            let default_open_ = val;
-            if (!default_open_) {
-                default_open_ = this.subfield ? 'preview' : 'edit';
-            }
-            this.s_preview_switch = default_open_ === 'preview' ? true : false;
-            return this.s_preview_switch;
-        },
-        codeStyle: function (val) {
-            this.codeStyleChange(val)
-        }
+      if (val !== this.d_value) {
+        this.d_value = val;
+      }
+    },
+    subfield: function (val, oldVal) {
+      this.s_subfield = val;
+    },
+    d_history_index() {
+      if (this.d_history_index > 20) {
+        this.d_history.shift();
+        this.d_history_index = this.d_history_index - 1;
+      }
+      this.d_value = this.d_history[this.d_history_index];
+    },
+    language: function (val) {
+      this.initLanguage();
     },
+    editable: function () {
+      this.editableTextarea();
+    },
+    defaultOpen: function (val) {
+      let default_open_ = val;
+      if (!default_open_) {
+        default_open_ = this.subfield ? "preview" : "edit";
+      }
+      this.s_preview_switch = default_open_ === "preview" ? true : false;
+      return this.s_preview_switch;
+    },
+    codeStyle: function (val) {
+      this.codeStyleChange(val);
+    },
+  },
 
-    components: {
-        'v-autoTextarea': autoTextarea,
-        'v-md-toolbar-left': md_toolbar_left,
-        'v-md-toolbar-right': md_toolbar_right
-    }
+  components: {
+    "v-autoTextarea": autoTextarea,
+    "v-md-toolbar-left": md_toolbar_left,
+    "v-md-toolbar-right": md_toolbar_right,
+  },
 };
 </script>
 <style lang="stylus" rel="stylesheet/stylus">
-    @import "lib/css/scroll.styl"
-    @import "lib/css/mavon-editor.styl"
+@import "lib/css/scroll.styl"
+@import "lib/css/mavon-editor.styl"
 </style>
 <style lang="css" scoped>
-    .auto-textarea-wrapper {
-        height: 100%;
-    }
+.auto-textarea-wrapper {
+  height: 100%;
+}
 </style>