mavon-editor使用教程

mavon-editor使用教程

  这段时间在做一个面试题网站，在实现的过程中想在vue脚手架中引入一个MarkDown的編輯器，对于一个前端小白来说属实有点困难，但是最终我还是实现了，废话不多说，先看效果！

新增面试题页面：

面试题修改页面：

面试题预览页面：

总体来说效果还是很满意的。
下面说一说具体实现过程：

1.安装

npm install mavon-editor

2.配置到main.js中这样就可以全局使用了

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

3.编辑页面配置引入

  没错这里只需要一行代码就可以了，font-size属性是设置编辑区字体大小的，其他属性大家可以去官网查看一下。

<mavon-editor v-model="questionFrom.answer" style="height: 500px" font-size="17px" />

4.预览页面配置

这里是我配置的预览页面的全部属性，有需要的可以自行修改。

        <mavon-editor
          ref="docDetaileNode"
          v-model="result"
          :subfield="false"
          :editable="false"
          :ishljs="true"
          :external-link="externalLink"
          box-shadow-style="0 0 0 0 rgba(0,0,0,0)"
          default-open="preview"
          :toolbars-flag="false"
          :xss-options="{
            whiteList: {
              iframe: ['src', 'height', 'width'],
              div: ['style', 'height', 'width', 'align'],
            },
          }"
        />

  我的使用方式是将编辑器放在form表单中，这样进行增删改查的时候就可以直接将数据存到数据库，并且在回显的时候，如果是回显在markdown编辑器的预览页面，是不需要的进行渲染的。可以说markdown是我最喜欢的编辑模式了，相比富文本编辑器要好太多了。