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

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 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: 帮助开启状态)

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.

Copyright (c) 2017 hinesboy