• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue-bl-markdown-editor: 一个基于markdown-it 高度可扩展的vue编辑器组件,支持扩展m ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

vue-bl-markdown-editor

开源软件地址:

https://gitee.com/bl_it/vue-bl-markdown-editor

开源软件介绍:

@toc

vue-bl-markdown-editor

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

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

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

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

演示站

11111

安装

$ 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">

配置

名称类型默认值描述
placeholderString请输入内容提示文本
heightNumber500编辑器高度
isShowToolBarBooleantrue是否显示工具栏
isShowToolBarRightBooleantrue是否显示右侧工具栏
showModeStringedit显示模式,edit,see 编辑/预览模式,isSplit true下无效
isShowSplitBooleantrue是否分屏,手机只可显示一个,此状态无效
toolBarsArray见下面工具栏,排序和显示
configObject见下面工具栏的配置
isSyncScrollBooleantrue是否同步滚动

工具栏

开发工具栏例子查看 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组件名,组件动态注册组件作为工具栏,使用方法看上
addToolBarregisterToolBarComponent返回的实例化组件,添加位置(默认最后)添加工具栏组件
delToolBar删除位置删除指定位置工具栏(不包括通过插槽加入的)
insertContent前缀,内容,后缀,是否强制替换内容,是否插入的时候选择插入内容

事件

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

插槽

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

高级扩展

  • 允许自行调用markdownit 注册插件 (从ready事件中获取/直接从ref中获取)

TODO

  • 基础工具栏
  • 实现撤销恢复功能
  • 兼容手机
  • 样式美化
  • 本项目中打包dev演示页面
  • highlight 样式引用(*)
  • 图片上传回调配置
  • 图片粘贴上传
  • 图片拖拽上传
  • 同步滚动(暂时按滚动条高度计算**)

录音兼容问题(测试chrom/firefox正常,edge申请失败)

必须运行在 https 下 测试可以正常运行

  • 自定义录音工具栏组件(*)
  • 本地图片粘贴上传不支持(待解决)

测试

  • 自定义工具栏
  • 表情配置
  • 图片上传
  • 粘贴上传
  • 拖入上传

BUG

  • 最底部插入列表无法自动换行到下一行显示(使用回车自动向下滚动)
  • 手机模式下工具栏最后一栏位置异常(pc模拟手机 还原不了无法测试)
  • 实时渲染 太卡导致连输,不正常显示

希望大家一起开发好用的工具栏吧

赞助

UTOOLS1567434353534.png


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap