使用
- Install：
npm install vue2-editor
- Usage： vue文件中引入，components中注册组件就可以使用了
import { VueEditor } from 'vue2-editor'
自定义工具栏
官网只说通过editorToolbar可以自定义，没有讲具体有哪些。这里做一个整理，欢迎补充~
<VueEditor
<VueEditor
v-model="editorData"
:editor-toolbar="customToolbar"
></VueEditor>
配置项整理
| 配置 | 说明 |
|---|---|
| header | 标题 |
| bold | 粗体 |
| italic | 斜体 |
| underline | 下划线 |
| strike | 中划线 |
| align | 对齐方式 |
| list | 列表 |
| indent | 缩进 |
| color | 字体颜色 |
| background | 字体背景色 |
| link | 链接 |
| image | 图片 |
| video | 视频 |
| clean | 清除样式 |
配置项使用
标题
header
- 按理会有Normal,H1-H6;实际效果只有H1-H3
customToolbar: [[{ header: [] }]],
- Normal,H1-H6
customToolbar: [[{ header: [false, 1, 2, 3, 4, 5, 6] }]]
- 只需要某一个、几个
customToolbar: [[{ header: [1, 3] }]]
字体
bold、italic、underline、strike
- 粗体：bold
customToolbar: [['bold']]
- 斜体：italic
customToolbar: [['italic']]
- 中划线：strike
customToolbar: [['strike']]
- 下划线：underline
customToolbar: [['underline']]
对齐方式
'', 'center', 'right', 'justify'
- 两种写法都会展示4种对齐方式，以
dropdown的形式展示
customToolbar: [{ align: [] }]
customToolbar: [{ align: ['', 'center', 'right', 'justify'] }]
- 以
平铺的效果展示
customToolbar: [
[
{ align: '' },
{ align: 'center' },
{ align: 'right' },
{ align: 'justify' },
],
],
字体颜色
color
- color数组中可以设置需要的颜色,[]默认的35种颜色
customToolbar: [{ color: ['#e60000'] }]
customToolbar: [{ color: [] }],
字体背景色
background
- background数组中可以设置需要的颜色,[]默认的35种颜色
customToolbar: [{ background: ['#e60000'] }]
customToolbar: [{ background: [] }],
列表
list：ordered、bullet、check
- order:有序；bullet：无序，check：勾选框
customToolbar: [
[{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
],
缩进
indent
customToolbar: [[{ indent: '-1' }, { indent: '+1' }]]
链接
link
customToolbar: [['link']]
图片
image
customToolbar: [['image']]
视频
video
customToolbar: [['video']]
清除样式
clean
customToolbar: [['clean']]
