vue项目引入mavonEditor编辑器（makedown）

1.安装

npm install mavon-editor --save
cnpm install mavon-editor --save

2.引入vue项目

// 全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

3.组件中引入

<mavon-edito class="mavon"r v-model="value" :toolbars='toolbars'></mavon-editor>

// 工具属性
 data() {
    return {
		toolbars: {
			bold: true, // 粗体
			italic: true, // 斜体
			header: true, // 标题
			underline: true, // 下划线
			strikethrough: true, // 中划线
			mark: true, // 标记
			superscript: true, // 上角标
			subscript: true, // 下角标
			quote: true, // 引用
			ol: true, // 有序列表
			ul: true, // 无序列表
			link: true, // 链接
			imagelink: true, // 图片链接
			code: true, // code
			table: true, // 表格
			fullscreen: true, // 全屏编辑
			readmodel: true, // 沉浸式阅读
			htmlcode: true, // 展示html源码
			help: true, // 帮助
			/* 1.3.5 */
			undo: true, // 上一步
			redo: true, // 下一步
			trash: true, // 清空
			save: true, // 保存（触发events中的save事件）
			/* 1.4.2 */
			navigation: true, // 导航目录
			/* 2.1.8 */
			alignleft: true, // 左对齐
			aligncenter: true, // 居中
			alignright: true, // 右对齐
			/* 2.2.1 */
			subfield: true, // 单双栏模式
			preview: true, // 预览
		}
	}
}

插件相关API

props属性

events 事件绑定

此文章是在开发过程中找到的比较好用的编辑器插件

资源来源于：https://www.npmjs.com/package/mavon-editor

本文转载，原文来源于：https://blog.csdn.net/weixin_45077530/article/details/112799890