mavonEditor

基于 Vue 的 markdown 编辑器

• github
• 演示网址

example (图片展示)

PC

移动

Use Setup (开始)

Install mavon-editor (安装)

$ npm install mavon-editor --save 

package.json

"mavon-editor": "^1.3.5" 

Use (如何引入)

 // 方法一 // import with ES6 import Vue from 'vue' import mavonEditor from 'mavon-editor' // require with Webpack/Node.js var Vue = require('vue') var mavOnEditor= require('mavon-editor') // use Vue.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, // code table: 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: 帮助开启状态) |

contact(联系我)

QQ:

• 1109089240

EMAIL:

• [email protected]
• [email protected]

欢迎咨询与建议