记一次使用mavon-editor编辑器的使用过程，添加自己的功能

mavon-editor编辑器使用：

导入：

import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor);

使用： slot="left-toolbar-before" 插槽是在左边工具条前插入html；当然还有slot="left-toolbar-after"在左边工具条后插入html；slot="right-toolbar-before" 在右边工具条前插入html；slot="right-toolbar-after"在右边工具条后插入html；

<mavon-editor ref="editor" 
       v-model="editor.content" 
       :ishljs="false"
       :placeholder="editor.title" 
       :autofocus="editor.autofocus"
       :style="editor.css"
       @fullScreen="fullScreen($event,$event)">
       <div slot="left-toolbar-before" class="fontDiv" @mouseover="showColor">
           <i class="op-icon fa fa-mavon-bold"></i>
       </div>
</mavon-editor>

 mavon-editor是对this.$refs.editor.d_value进行操作，然后采用第三方依赖markdown-it将markdown语法转换为html；将html存储在this.$refs.editor.d_render中；

我们需要自己完成我们的功能，也只需操作this.$refs.editor.d_value，mavon-editor通过监听this.$refs.editor.d_value自动调用markdown-it中的render方法；最终实现效果(通过选中文本改变字体颜色)：

过滤掉html的方法：将html改为false即可；代码在lib/core/markdown.js中；记得生效哦

var markdown_config = {
    html: true,        // Enable HTML tags in source
    xhtmlOut: true,        // Use '/' to close single tags (<br />).
    breaks: true,        // Convert '\n' in paragraphs into <br>
    langPrefix: 'language-',  // CSS language prefix for fenced blocks. Can be
    linkify: false,        // 自动识别url
    typographer: true,
    quotes: '“”‘’',
    highlight: function (str, lang) {
        if (lang && hljsLangs[lang]) {
            return '<pre><div class="hljs"><code class="' + lang + '">' +         markdown.utils.escapeHtml(str) + '</code></div></pre>';
        }
        return '<pre><code class="' + lang + '">' + markdown.utils.escapeHtml(str) + '</code></pre>';
    }
}

 

本文地址：https://blog.csdn.net/pw321123/article/details/109370047