在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:vue-bl-markdown-editor开源软件地址:https://gitee.com/bl_it/vue-bl-markdown-editor开源软件介绍:@toc vue-bl-markdown-editor
安装$ npm install vue-bl-markdown-editor --save Use (如何引入)
// 全局注册 // 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"> 配置
工具栏
工具栏配置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 插入位置*/); 方法
事件
插槽
高级扩展
TODO
测试
BUG
希望大家一起开发好用的工具栏吧赞助 |
请发表评论