@zhangqingcq/plug-r-qw
Version:
A JS lib base on Vue and View-design, you can achieve some complex functions with simple code after install this lib.
114 lines (97 loc) • 2.63 kB
Markdown
## editorPro
富文本编辑器，v-model 绑定内容，全局 UI 组件，直接用，基于 wangEditor5
### 属性
- value 字符串，编辑器内容，推荐使用 v-model 绑定
- toolbarConfig 对象，工具栏配置，参考[wangEditor5 工具栏配置](https://www.wangeditor.com/v5/toolbar-config.html)
- editorConfig 对象，编辑器配置，参考[wangEditor5 编辑器配置](https://www.wangeditor.com/v5/editor-config.html)
- mode 字符串，`'default'` 默认模式 - 集成了 wangEditor 所有功能；`'simple'` 简洁模式 - 仅有部分常见功能，但更加简洁易用，默认：`'default'`
- height 正数/字符串，编辑区域高度，默认：`300`
- placeholder 字符串，占位符，默认：`请输入`
- disabled 布尔对象，禁用编辑功能，默认：`false`
### 注意
- 自定义上传到服务器的逻辑
```
editorConfig.MENU_CONF['uploadImage'] ={
async customUpload(file,insertFn){
// file 是 input 中选中的文件列表
// insertFn 是获取图片 url 后，插入到编辑器的方法
// 自己实现上传，并得到图片 url alt href
// 将图片插入到编辑器中
insertFn(url, alt, href)
}
}
```
- 定制样式（编辑区域、预览层,解决 z-index 导致的穿透等）：编辑器容器 class 为：`editor-pro-root`，工具栏 class 为：`editor-pro-toolbar`，编辑区 class 为`editor-pro-editor`，预览层 id 为`editor-preview`,直接另外写新样式覆写原有样式即可。
- 编辑器工具栏菜单 key:
```angular2
[
"headerSelect",
"blockquote",
"|",
"bold",
"underline",
"italic",
{
"key": "group-more-style",
"menuKeys": [
"through",
"code",
"sup",
"sub",
"clearStyle"
]
},
"color",
"bgColor",
"|",
"fontSize",
"fontFamily",
"lineHeight",
"|",
"bulletedList",
"numberedList",
"todo",
{
"key": "group-justify",
"menuKeys": [
"justifyLeft",
"justifyRight",
"justifyCenter",
"justifyJustify"
]
},
{
"key": "group-indent",
"menuKeys": [
"indent",
"delIndent"
]
},
"|",
"emotion",
"insertLink",
{
"key": "group-image",
"menuKeys": [
"insertImage",
"uploadImage"
]
},
{
"key": "group-video",
"menuKeys": [
"insertVideo",
"uploadVideo"
]
},
"insertTable",
"codeBlock",
"divider",
"|",
"undo",
"redo",
"|",
"previewX",
"fullScreen"
]
```