1、安装

yarn add mavon-editor

2、引入

在要使用的vue文件中引用mavon-editor组件和样式文件

import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

3、组件注册

在components组件中注册mavonEditor组件

components: { mavonEditor },

4、使用

<mavon-editor
    class="maconEditor-box"
    ref="editors"
    :value="doc"
    :subfield="false"
    :defaultOpen="'preview'"
    :toolbarsFlag="false"
    :editable="false"
    :scrollStyle="true"
    :ishljs="true"
></mavon-editor>

:value="doc"               // 需要转换的内容
:subfield="false"          // 开启单栏模式
:defaultOpen="'preview'"   // 展示预览区域
:toolbarsFlag="false"      // 关闭工具栏
:editable="false"          // 禁止编辑
:scrollStyle="true"        // 开启滚动条样式
:ishljs="true"             // 开启代码高亮

5、效果图