hinesboy / mavonEditor

mavonEditor - A markdown editor based on Vue that supports a variety of personalized features
http://www.mavoneditor.com/
MIT License
6.45k stars 918 forks source link

自定义工具栏 #476

Open chunshand opened 5 years ago

chunshand commented 5 years ago

工具栏支持自定义添加样式 工具图标吗

例如文件上传 视频上传 是否支持此类的二次开发

doghap commented 5 years ago

查看源码后发现工具栏是有两个slot可以用:

<slot name="left-toolbar-before" />
<slot name="left-toolbar-after" />

然后图标的代码是:

<button :disabled="!editable" type="button" v-if="toolbars.bold" @click="$clicks('bold')"
                class="op-icon fa fa-mavon-bold" aria-hidden="true"
                :title="`这是标题`"></button>

这样一来,只要在editor 里用上这两个slot 就可以添加自定义工具图标:

<mavon-editor :box-shadow="false" v-model="mdl.content" required>
    <template slot="left-toolbar-before">
         <button type="button"
              class="op-icon fa fa-mavon-bold" aria-hidden="true" :title="`这是标题`"></button>
     </template>
</mavon-editor>    

剩下的就是按钮的一些事件, 可以参考源码的代码弄各种弹窗什么的