mavonEditor

github项目地址
演示网址

基于Vue的markdown编辑器

example (图片展示)

Use Setup (开始)

Install mavon-editor (安装)

$ npm install mavon-editor --save

package.json

"mavon-editor": "^1.3.5"

Use (如何引入)

    // 方法一// import with ES6import Vue from 'vue'import mavonEditor from 'mavon-editor'// require with Webpack/Node.jsvar Vue = require('vue')var mavonEditor = require('mavon-editor')// useVue.use(mavonEditor)

    // 方法二// or use with component(ES6)import { mavonEditor } from 'mavon-editor'export default {components: {mavonEditor}}

html

    <!-- 使用双向绑定修饰符 --><mavonEditor v-model="value"/>

    <!-- 当value发生改变 , 触发change事件 --><mavonEditor :value="value" @change="function"/>

默认大小样式为 min-height: 300px , ming-width: 300px 可自行覆盖
基础z-index: 1500
单栏编辑模式下 , TAB键主动触发markdown渲染
屏幕分辨率低于768px ，自动取消【单栏 | 双栏】编辑模式，更改为【编辑 | 预览】切换，并且取消【沉浸式阅读】模式( > 768px 的眼睛图标为【阅读模式】 , 反之为【编辑 |预览】)

API 文档

props

name 名称	type 类型	default 默认值	describe 描述
value	String		初始值
scrollStyle	Boolean	true	开启滚动条样式(暂时仅支持chrome)
subfield	Boolean	true	默认开启双栏编辑(单栏模式 TAB键主动触发markdown渲染)
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, // 表格subfield: true, // 是否需要分栏fullscreen: true, // 全屏编辑readmodel: true, // 沉浸式阅读htmlcode: true, // 展示html源码help: true, // 帮助/* 新增 */undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: true // 保存（触发events中的save事件）}

events

name 方法名	params 参数	describe 描述
change	String: value , String: reder	编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)
save	String: value , String: reder	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: 双栏开启状态)
helptoggle	Boolean: status , String value	查看帮助的回调事件(boolean: 帮助开启状态)

Dependencies (依赖)

markdown-it
auto-textarea
stylus

follow-up (后续)

~~撤销键、清空键、保存按钮~~（完成）
支持开启标题导航
滚动条样式的浏览器兼容性
自定义工具栏功能键
提高移动端样式适配性
markdown样式自定义
重构

update(更新内容)

1.3.5 增加撤销键、清空键、保存按钮 , 修复底部展示不完整BUG
1.3.4 多个编辑器快捷键/组合键监听覆盖 , props.toolbars 传递规则纠正(传入值整体覆盖默认值)
1.3.3 多个编辑器z-index冲突
1.3.2 props 传递方法更改为 v-on 绑定方法

contact(联系我)

QQ:
- 1109089240

EMAIL:
- zhy@zhystar.com
- hines.zhu@gmail.com

欢迎咨询与建议

Licence (证书)

mavonEditor is open source and released under the MIT Licence.

一款强大易用的Vue-markdown文本编辑器插件相关推荐

Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
vue整合文本编辑器
场景说明: 后端输入一篇文章,在前端显示,这时就有个排版问题了.单纯的文本输入框无法满足要求. 所以需要采用后端整合文本编辑器,前端(vue)采用v-html标签直接渲染小编的示例是整合vue 0. ...
pc 图片预览放大端vue_安利一款简单好用的Vue图片预览插件
在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...
14款前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
14款web前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
Vue中富文本编辑器的使用
基于 Vue 的富文本编辑器有很多,例如官方就收录推荐了一些: https://github.com/vuejs/awesome-vue#rich-text-editing . 这里我们以 eleme ...
vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中
题记: ----- 互联网不该只是技术的,不能简化成内容和工具,它应该属于生活本身 vue-quill-editor 是 Vue 项目中使用的富文本编辑器 1 引言在实际应用开发中,在常见的管理后 ...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
vue-quill-editor npm install vue-quill-editor –save or yarn add vue-quill-editor 文件中使用 <template& ...

一款强大易用的Vue-markdown文本编辑器插件

mavonEditor

example (图片展示)

Use Setup (开始)

Install mavon-editor (安装)

package.json

Use (如何引入)

html

API 文档

props

events

Dependencies (依赖)

follow-up (后续)

update(更新内容)

contact(联系我)

Licence (证书)

一款强大易用的Vue-markdown文本编辑器插件相关推荐

最新文章

热门文章