1. 安装

npm install mavon-editor --save

2. 注册

在main.js中进行引入注册

// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({'el': '#main',data() {return { value: '' }}
})

3. 基础使用

在组件中，直接通过<mavon-editor/>标签进行使用

<template><div id="MarkDown"><mavon-editor v-model="value"/></div>
</template><script>
export default {name: "MarkDown",data() {return {value:123}}
}
</script><style lang="scss" scoped>
#MarkDown {height: 100%;width: 100%;background-color: blue;
}
</style>

效果：

4. API

props

name 名称	type 类型	default 默认值	describe 描述
value	String		初始值
language	String	zh-CN	语言选择，暂支持 zh-CN: 简体中文, zh-TW: 正体中文， en: 英文， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语
fontSize	String	14px	编辑区域文字大小
scrollStyle	Boolean	true	开启滚动条样式(暂时仅支持chrome)
boxShadow	Boolean	true	开启边框阴影
boxShadowStyle	String	0 2px 12px 0 rgba(0, 0, 0, 0.1)	边框阴影样式
transition	Boolean	true	是否开启过渡动画
toolbarsBackground	String	#ffffff	工具栏背景颜色
previewBackground	String	#fbfbfb	预览框背景颜色
subfield	Boolean	truet	rue：双栏(编辑预览同屏)， false：单栏(编辑预览分屏)
defaultOpen	String		edit：默认展示编辑区域， preview：默认展示预览区域 , 其他 = edit
placeholder	String		开始编辑…输入框为空时默认提示文本
editable	Boolean	true	是否允许编辑
codeStyle	String	code-github	markdown样式：默认github, 可选配色方案
toolbarsFlag	Boolean	true	工具栏是否显示
navigation	Boolean	false	默认展示目录
shortCut	Boolean	true	是否启用快捷键
autofocus	Boolean	true	自动聚焦到文本框
ishljs	Boolean	true	代码高亮
imageFilter	function	null	图片过滤函数，参数为一个File Object，要求返回一个Boolean, true表示文件合法，false表示文件不合法
imageClick	function	null	图片点击事件，默认为预览，可覆盖
tabSize	Number	\t	tab转化为几个空格，默认为\t
xssOptions	Object	null	xss规则配置，参考
toolbars	Object	如下例	工具栏

/*默认工具栏按钮全部开启, 传入自定义对象例如: {bold: true, // 粗体italic: true,// 斜体header: true,// 标题}此时, 仅仅显示此三个功能键*/
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, // codetable: 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, // 预览
}

events 事件绑定

name 方法名	params 参数	describe 描述
change	String: value , String: render	编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)
save	String: value , String: render	ctrl + s 的回调事件(保存按键,同样触发该回调)
fullScreen	Boolean: status , String: value	切换全屏编辑的回调事件(boolean: 全屏开启状态)
readModel	Boolean: status , String: value	切换沉浸式阅读的回调事件(boolean: 阅读开启状态)
htmlCode	Boolean: status , String: value	查看html源码的回调事件(boolean: 源码开启状态)
subfieldToggle	Boolean: status , String: value	切换单双栏编辑的回调事件(boolean: 双栏开启状态)
previewToggle	Boolean: status , String: value	切换预览编辑的回调事件(boolean: 预览开启状态)
helpToggle	Boolean: status , String: value	查看帮助的回调事件(boolean: 帮助开启状态)
navigationToggle	Boolean: status , String: value	切换导航目录的回调事件(boolean: 导航开启状态)
imgAdd	String: filename, File: imgfile	图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)
imgDel	String: filename	图片文件删除回调事件(filename: 写在md中的文件名)

5. 代码高亮

安装highlight.js
npm install highlight.js

main.js中引入并注册全局指令

// 引入高亮
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
// 注册指令
Vue.directive('highlight', function (el) {let blocks = el.querySelectorAll('pre code')blocks.forEach((block) => {hljs.highlightBlock(block)})
})

组件中引入css

import 'mavon-editor/dist/markdown/github-markdown.min.css'

使用指令即可

6. 完整组件代码

<template><div id="MarkDown" v-highlight><mavon-editorid="md"v-model="value" :fontSize="fontSize" :scrollStyle="scrollStyle":placeholder="placeholder":codeStyle="codeStyle" :ishljs="ishljs" :toolbars="toolbars"@save="saveImpl" @imgAdd="imgAddImpl" @imgDel="imgDelImpl"/></div>
</template><script>
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import {textService,demo} from "@/service/api";const 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, // codetable: true, // 表格fullscreen: false, // 全屏编辑readmodel: false, // 沉浸式阅读htmlcode: false, // 展示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: false, // 预览
}export default {name: "MarkDown",props: {editorContent: {type: String, default: null},fontSize: {type: String, default: `18px`},scrollStyle: {type: Boolean, default: true},placeholder: {type: String, default: `请输入内容`},ishljs: {type: Boolean, default: true},codeStyle: {type: String, default: "tomorrow-night-eighties"},},data() {return {toolbars: toolbars,editText: ""}},methods: {/*** ctrl + s 的回调事件(保存按键,同样触发该回调)* @param value* @param render*/saveImpl(value, render) {textService().then(res => {console.log(res);})},/*** 图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)* @param filename* @param imgFile*/imgAddImpl(filename, imgFile) {const formdata = new FormData();formdata.append('image', imgFile);demo(formdata).then(res => {console.log(res);})},/*** 图片文件删除回调事件(filename: 写在md中的文件名)* @param filename*/imgDelImpl(filename) {}},computed: {value: {get: function () {return this.editorContent},// setterset: function (newValue) {this.editText = newValue}}}
}
</script><style lang="scss" scoped>
#MarkDown {height: 100%;width: 100%;position: relative;#md {height: 100%;width: 100%;}
}
</style>

Vue：Vue-cli2结合mavonEditor实现MarkDown编辑器相关推荐

技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片技能学习:学习使用php(tp6框架) + ...
使用 Vue 和 Electron 开发一款简单的 Markdown 编辑器
2021SC@SDUSC 本文并不涉及自己设计一套 Markdown 渲染组件的部分,Markdown 渲染组件可通过 marked 和 highlight.js 自行实现.但本文重点在于如何使用 E ...
markdown editor_基于 Vue+Vditor 所见即所得Markdown编辑器
今天给大家推荐一款超牛的Vue.js构建多功能markdown编辑器Arya. markdown-online-editor 基于vue+vditor开发在线Markdown富文本编辑器,star高达 ...
Vue - Markdown编辑器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 最近在做工作室的官网,需要一套 ...
vue项目使用markdown编辑器
1.安装mavon-editor $ npm install mavon-editor --save 2. 需要使用Markdown编辑器的页面js中: import { mavonEditor } ...
Vue.js项目：制作一个Markdown格式的笔记本(上)
Markdown笔记本 1. 制作一个基本的笔记编辑器 1.1 项目准备 index.html 文件:笔记本的整体框架 script.js 文件:添加一些js 代码继续在script.js文件中添加 ...
微信公众平台菜单编辑php,如何使用Vue.js实现微信公众号菜单编辑器（思路详解）...
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(思路详解),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试 ...
微信公众平台菜单编辑php,Vue.js实现微信公众号菜单编辑器步骤详解（上）
这次给大家带来Vue.js实现微信公众号菜单编辑器步骤详解(上),Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试着做一个像 ...
微信公众号菜单html5,Vue.js 实现微信公众号菜单编辑器功能(一)
学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下具体样式代码查看项目github 创建一个vue实例 var app = new Vue({ el: '#app ...
公众号菜单代码 php,如何使用Vue.js实现微信公众号菜单编辑器（案例代码）
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(案例代码),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 实现菜单删除方法在vue实例中添加 ...

Vue：Vue-cli2结合mavonEditor实现MarkDown编辑器

1. 安装

2. 注册

3. 基础使用

4. API

props

events 事件绑定

5. 代码高亮

6. 完整组件代码

Vue：Vue-cli2结合mavonEditor实现MarkDown编辑器相关推荐

最新文章

热门文章