mavonEditor:基于 Vue 的 Markdown 编辑器

purpleswan 发布于7月前 •最后由 坐在第一排吃瓜子5月前回复 阅读12591次
1 条评论

mavonEditor

基于Vue的markdown编辑器

example (图片展示)

PC

mavonEditor:基于 Vue 的 Markdown 编辑器

移动

mavonEditor:基于 Vue 的 Markdown 编辑器 mavonEditor:基于 Vue 的 Markdown 编辑器

Use Setup (开始)

Install mavon-editor (安装)

$ npm install mavon-editor --save

package.json

"mavon-editor": "^1.3.3"

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 如下 工具栏
/*
    默认工具栏按钮全部开启, 如需关闭, 设置对应键值为false即可
    例如: {
        bold: false
    }
    此时, 粗体将被隐藏,其余正常显示
 */
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// 帮助
  }

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 (依赖)

follow-up (后续)

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

update(更新内容)

  • 1.3.3 多个编辑器z-index冲突
  • 1.3.2 props 传递方法 更改为 v-on 绑定方法

Licence (证书)

mavonEditor is open source and released under the MIT Licence.

Copyright (c) 2017 hinesboy

查看原文: mavonEditor:基于 Vue 的 Markdown 编辑器

  • 坐在第一排吃瓜子

    vue2.0项目中我安装完依赖,mavon-editor,后面再模板中引入,报错Failed to mount component: template or render function not defined.

    #1楼, 5月前 回复
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。