记一次使用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方法;最终实现效果(通过选中文本改变字体颜色):
过滤掉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
上一篇: 数学教具功能beta版本开发
下一篇: 曹操的7个女儿为什么会嫁给同一个人?