解锁新技能：关于mavon-editor的灵活使用，个人是因为有俩个地方需要使用，写了俩段代码，实际开发中，可通过属性来实现需求

痛定思痛。 2022-12-01 14:13 3阅读 0赞

1.  `npm install mavon-editor --save`
2.  全局挂载组件

// main.js
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'	//解决编辑器的功能显示问题
    Vue.use(mavonEditor)

1.  组件内部使用

<mavon-editor v-model="formAddSpecial.description" :toolbars="toolbars" :subfield="true" />
    subfield: true表示双栏，false表示单栏
    toolbars: 可自定义需要使用的工具栏

data() { 
    	return { 
    		toolbars: { 
            	link: true // 跳转链接
          	}
    	}
    }

1.  展示图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center]
2.  组件内部使用

<mavon-editor :value="specialDetail.desc" :subfield="false" :defaultOpen="'preview'" :toolbarsFlag="false" :editable="false" :scrollStyle="true" :ishljs="true" />
    toolbarsFlag: 不显示工具栏
    editable: 不能编辑
    subfield: 单栏

1.  展示图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/0b3a8b5aceec41b9a59d04f6f834bc6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/99f124d0465249a18a0be759b847e256.png