mavonEditor编辑器的使用

本次使用不涉及图片上传，只是简单文本的编辑。
1.官网
github:https://github.com/hinesboy/mavonEditor

2.安装

npm install mavon-editor --save

3.导入 main.js

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

4.使用
1.封装成组件

<template><div class="mavonEditor"><mavon-editorref="md":value="mdData":toolbars="markdownOption"  //工具栏是否显示。默认为trueplaceholder=" ":editable="readonly"    // 是否允许编辑 默认为true@change="change" /></div>
</template>
<script>export default {props: {mdData: {type: String,default: ''}, readonly: {type: Boolean,default: true},},data() {return {markdownOption: {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, // codetable: true, // 表格// fullscreen: true, // 全屏编辑// readmodel: true, // 沉浸式阅读htmlcode: true, // 展示html源码// help: true, // 帮助/* 1.3.5 */undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: false, // 保存（触发events中的save事件）/* 1.4.2 */// navigation: true, // 导航目录/* 2.1.8 */alignleft: true, // 左对齐aligncenter: true, // 居中alignright: true, // 右对齐/* 2.2.1 */// subfield: true // 单双栏模式// preview: true // 预览},mavonValue: ''}},methods: {change() {  // 也可以接收 value 和 render参数 获取内容this.$emit('update:mdData', this.$refs.md.d_value);// console.log(this.$refs.md.d_render);  // 带有标签的内容// console.log(this.$refs.md.d_value);  // markdown文本格式},}}
</script><style scoped lang="scss">
.mavonEditor {width: 100%;height: 100%;/deep/.v-note-wrapper {box-shadow: unset !important;border: 1px solid #DCDFE6;.v-note-op {padding: 0!important;width: unset!important;}}
}
</style>

2.编辑父组件
使用v-bind.sync进行子父组件传值，若子组件绑定数据使用v-model，进行会报下边的错误，子组件不能更改父组件中的内容。此插件中可使用:value

特别是当子组件使用了某些第三方 UI 组件库的时候，在子组件内进行了 v-model 双向绑定，而该值又需父组件传入 props 进行依赖，于是当第三方组件事件被触发导致 v-model 值发生改变，就产生了冲突，因为此时父级传入的 props 不可更改。子组件的v-model就不受控了

 <mavon-editor :md-data.sync="info.templateContent" />

3.回显父组件

 <mavon-editor:md-data="info.templateContent":readonly="false" />

mavonEditor编辑器的使用相关推荐

mavon-editor编辑器与图片上传
mavon-editor编辑器与图片上传图片上传是一个常用的功能,今天我们来实现基于Vue的Markdown编辑器--mavon-editor的图片上传功能. 一.安装与引入 1. 首先在命令行安装 ...
Vue引入 mavon-editor 编辑器的详细步骤
Vue引入 mavon-editor 编辑器的详细步骤一.编辑器的引入如果你的项目之前没有安装过该编辑器,那就得先安装编辑器在自己的项目的根目录执行下列命令: npm install mavon ...
vue + mavon-editor编辑器
vue + mavon-editor编辑器我个人使用过 quill-editor编辑器和 mavon-editor编辑器这个编辑器的优点还挺多的,但我个人的观点预览功能很棒如果后续想了解 qu ...
记一次使用mavon-editor编辑器的使用过程，添加自己的功能
mavon-editor编辑器使用: 导入: import mavonEditor from 'mavon-editor'; import 'mavon-editor/dist/css/index.c ...
mavon-editor编辑器页面瞄点
# 获取页面所有的a标签使用mavon-editor编辑器输出的html中,标题<h3><a id="npm__0"></a>npm 安装&l ...
Vue项目集成mavonEditor编辑器
1.安装mavonEditor npm install mavon-editor --save 2.main.js配置 import mavonEditor from 'mavon-editor'; ...
v-md-editor详解（MarkDown编辑器组件）
v-md-editor 是基于 Vue 开发的 markdown 编辑器组件.即支持vue2.0的项目也支持vue3.0的项目,另一个 mavonEditor编辑器在Vue3使用过程中不兼容. Vue ...
我用Python写了一个成语接龙的游戏，并把它部署到了手机上
我用Python写了一个成语接龙的游戏,并把它部署到了手机上成语大全数据 6月高考的前一天,我发布的一篇文章,决战高考,帮你秒变成语之王,当时只是把 http://chengyu.haoshiwen ...
富文本编辑器mavon-editor文章回显
继上篇安装使用mavon-editor,本篇讲述文章回显问题使用富文本编辑器就是为了实现发布帮助文档和公告新闻类的编辑功能,文章编辑完毕自然要在页面中展示出来.文章的排版和样式自然要同在编辑器中的一 ...
Vue项目集成Markdown标记语言编辑器（MavonEditor）
文章目录前言一.可用的Markdown集成技术二.使用步骤 1.安装mavonEditor包 2.导入并使用mavonEditor 3.官方API 总结前言 Markdown是一种标记语言,相 ...

mavonEditor编辑器的使用

mavonEditor编辑器的使用相关推荐

最新文章

热门文章