vue+express博客项目中插入富文本编辑器

安装mavon-editor。

npm install mavon-editor --save

在要插入富文本的页面引入mavon-editor。

import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);

使用mavon-editor组件

<mavon-editor @save="addDiary" v-model="content" class="editorBox" :subfield="false"></mavon-editor>

这个组件就是一个输入编辑器，具体属性可参考官网。

这里存入数据库是以特殊标记来表示html标签，当前台显示时需要进行渲染，这里使用marked来渲染。

 

后台用mavon-editor，前台用marked。

 

安装 marked

npm install marked --save

在需要渲染的页面引入marked

import marked from "marked";

使用marked