0.0.2 • Published 7 months ago
vue-markdown-xd v0.0.2
@toc
vue-markdown-xd
一个基于markdown-it 高度可扩展的vue编辑器组件
允许提供插槽自定义工具栏
允许通过动态注册组件，允许插入工具栏指定位置
优势： 可完全自定义工具栏功能，markdown-it插件调用等
安装
$ npm install vue-markdown-xd --saveUse (如何引入)
main.js:
// 全局注册
// import with ES6
import Vue from 'vue'
import MarkDownEditor from 'vue-markdown-xd'
import 'vue-markdown-xd/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 | 工具栏右侧尾部插槽 |
高级扩展
- 允许自行调用markdownit 注册插件 （从ready事件中获取/直接从ref中获取）
TODO
- 基础工具栏
- 实现撤销恢复功能
- 兼容手机
- 样式美化
- 本项目中打包dev演示页面
- highlight 样式引用（*）
- 图片上传回调配置
- 图片粘贴上传
- 图片拖拽上传
- 同步滚动(暂时按滚动条高度计算**)
录音兼容问题（测试chrom/firefox正常,edge申请失败）
必须运行在 https 下 测试可以正常运行
- 自定义录音工具栏组件(*)
- 本地图片粘贴上传不支持（待解决）
测试
- 自定义工具栏
- 表情配置
- 图片上传
- 粘贴上传
- 拖入上传
BUG
- 最底部插入列表无法自动换行到下一行显示（使用回车自动向下滚动）
- 手机模式下工具栏最后一栏位置异常（pc模拟手机 还原不了无法测试）
- 实时渲染 太卡导致连输，不正常显示
希望大家一起开发好用的工具栏吧
赞助
