feat(toolbar): Support custom toolbar

src/components/md-toolbar-left.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="v-left-item">
+        <slot name="left-toolbar-before" />
         <button :disabled="!editable" type="button" v-if="toolbars.bold" @click="$clicks('bold')"
                 class="op-icon fa fa-mavon-bold" aria-hidden="true"
                 :title="`${d_words.tl_bold} (ctrl+b)`"></button>
@@ -102,6 +103,7 @@
         <button type="button" v-if="toolbars.save" @click="$clicks('save')" class="op-icon fa fa-mavon-floppy-o"
                 aria-hidden="true"
                 :title="`${d_words.tl_save} (ctrl+s)`"></button>
+        <slot name="left-toolbar-after" />
 
         <!-- 添加image链接 -->
         <transition name="fade">

src/components/md-toolbar-right.vue

@@ -1,5 +1,6 @@
 <template>
       <div class="v-right-item">
+        <slot name="right-toolbar-before" />
         <button type="button" v-if="toolbars.navigation" @click="$clicks('navigation')" v-show="!s_navigation"
                 class="op-icon fa fa-mavon-bars"
                 aria-hidden="true" :title="`${d_words.tl_navigation_on} (F8)`"></button>
@@ -34,6 +35,7 @@
         <button type="button"  v-if="toolbars.help" @click="$clicks('help')" class="op-icon fa fa-mavon-question-circle"
                  style="font-size: 17px;padding: 5px 6px 5px 3px"
                  :title="d_words.tl_help" aria-hidden="true"></button>
+        <slot name="right-toolbar-after" />
       </div>
 </template>
 <script type="text/ecmascript-6">

src/dev/app.vue

@@ -27,7 +27,21 @@
                           :language="d_language" @change="change" @save="saveone" :ishljs="true" class="item-editor" v-model="help1"
                           :external_link="external_link"
                           @imgAdd="$imgAdd" @imgDel="$imgDel" @subfieldtoggle="$subfieldtoggle" @previewtoggle="$previewtoggle"
-                          :imageFilter="image_filter"></mavon-editor>
+                          :imageFilter="image_filter">
+                <!-- <template slot="left-toolbar-before">
+                    左工具栏前
+                </template>
+                <template slot="left-toolbar-after">
+                    左工具栏后
+                </template>
+
+                <template slot="right-toolbar-before">
+                    右工具栏前
+                </template>
+                <template slot="right-toolbar-after">
+                    右工具栏后
+                </template> -->          
+            </mavon-editor>
             <button ref="diy" type="button" @click="$click('selftest')" class="op-icon fa fa-mavon-align-left"
                 aria-hidden="true" title="自定义"></button>
         </div>

src/index.js

@@ -11,6 +11,8 @@ const mavonEditor = require('./mavon-editor.vue');
 const VueMavonEditor = {
     markdownIt: mavonEditor.mixins[0].data().markdownIt,
     mavonEditor: mavonEditor,
+    LeftToolbar: require('./components/md-toolbar-left'),
+    RightToolbar: require('./components/md-toolbar-right'),
     install: function(Vue) {
         Vue.component('mavon-editor', mavonEditor);
     }

src/mavon-editor.vue

@@ -4,13 +4,19 @@
         <div class="v-note-op" v-show="toolbarsFlag" :class="{'shadow': boxShadow}">
             <v-md-toolbar-left ref="toolbar_left" :editable="editable" :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"/>
+                               @imgAdd="$imgAdd" @imgDel="$imgDel" @imgTouch="$imgTouch" :image_filter="imageFilter">
+                <slot name="left-toolbar-before" slot="left-toolbar-before" />
+                <slot name="left-toolbar-after" slot="left-toolbar-after" />
+            </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"/>
+                                :s_navigation="s_navigation">
+                <slot name="right-toolbar-before" slot="right-toolbar-before" />
+                <slot name="right-toolbar-after" slot="right-toolbar-after" />
+            </v-md-toolbar-right>
         </div>
         <!--编辑展示区域-->
         <div class="v-note-panel" :class="{'shadow': boxShadow}">