欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-30 19:15:06
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"在右边工具条.....

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方法;最终实现效果(通过选中文本改变字体颜色):

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

过滤掉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