blowsnowit / vue-bl-markdown-editor Goto Github PK

View Code? Open in Web Editor NEW

66.0 2.0 2.0 6.97 MB

一个基于markdown-it 高度可扩展的vue编辑器组件

Home Page: http://markdown-editor.bload.cn/html/

License: MIT License

HTML 1.60% Vue 74.45% JavaScript 23.95%

markdown markdown-it vue

vue-bl-markdown-editor's Introduction

@toc

vue-bl-markdown-editor

一个基于markdown-it 高度可扩展的vue编辑器组件

允许提供插槽自定义工具栏

允许通过动态注册组件，允许插入工具栏指定位置

优势：可完全自定义工具栏功能，markdown-it插件调用等

演示站

安装

$ npm install vue-bl-markdown-editor --save

Use (如何引入)

main.js:

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

配置要求

<!--本组件使用font-awesome字体图标库，请于index.html提前引入-->
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!--代码块样式，更多查看 https://highlightjs.org -->
<link href="//cdn.bootcss.com/highlight.js/9.14.1/styles/atom-one-dark.min.css" rel="stylesheet">
<!--编辑器主题颜色-->
<link href="//cdn.bootcss.com/github-markdown-css/3.0.1/github-markdown.min.css" rel="stylesheet">

配置

名称	类型	默认值	描述
placeholder	String	请输入内容	提示文本
height	Number	500	编辑器高度
isShowToolBar	Boolean	true	是否显示工具栏
isShowToolBarRight	Boolean	true	是否显示右侧工具栏
showMode	String	edit	显示模式，edit,see 编辑/预览模式,isSplit true下无效
isShowSplit	Boolean	true	是否分屏，手机只可显示一个，此状态无效
toolBars	Array	见下面	工具栏,排序和显示
config	Object	见下面	工具栏的配置
isSyncScroll	Boolean	true	是否同步滚动

工具栏

开发工具栏例子查看 src/dev/toolBar

名称	描述
bold	粗体
italic	斜体
header	标题
underline	下划线
strikethrough	中划线
thumb-tack	标记
superscript	上角标
subscript	下角标
align-left	居左
align-center	居中
align-right	居右
quote-left	段落引用
list-ol	有序列表
list-ul	无须列表
link	链接
picture	图片
code	代码块
table	表格
emoji	表情
undo	上一步
repeat	下一步
trash	清空
about	关于，希望保留
separator	分隔符

工具栏配置

config: {
  emojis:{
    // 配置多个表情
    more:[{name:'test',datas:['1','2']}],
    //是否覆盖默认的
    isCover: true
  },
  // 配置图片上传
  picture:{
    // 需要传回去上传后的路径
    // from paste/drag/upload 粘贴/拖拽/上传
    // 回调 异步请使用promise 案例看 src/dev/App.vue 
    uploadCallback: (file,from)=>{
      return new Promise(resolve => {
        resolve({name:'',url: ''});
      });
    },
    // 是否解析图片列表
    resolving: true
  }
}
toolBars:[
  'bold','italic',...更多
]

自定义工具栏

let editor = this.$refs.editor;
let toolBar1 = editor.registerToolBarComponent('demo1',require(Example1.vue));
editor.addToolBar(toolBar1/*,0 插入位置*/);

方法

名称	参数	描述
registerToolBarComponent	组件名,组件	动态注册组件作为工具栏，使用方法看上
addToolBar	registerToolBarComponent返回的实例化组件,添加位置（默认最后）	添加工具栏组件
delToolBar	删除位置	删除指定位置工具栏（不包括通过插槽加入的）
insertContent	前缀,内容,后缀,是否强制替换内容,是否插入的时候选择	插入内容

事件

名称	参数	描述
input	内容	输入内容
ready	markdownit	加载完毕

插槽

名称	描述
tool-bar-left-head	工具栏左侧头部插槽
tool-bar-left-foot	工具栏左侧尾部插槽
tool-bar-right-head	工具栏右侧头部插槽
tool-bar-right-foot	工具栏右侧尾部插槽