element ui html编辑器,element-ui 富文本编辑器实现

element-ui 富文本编辑器实现

在项目中需要用到一个富文本编辑器，这里选择的是vue-quill-editor参考网站

v-model="ruleForm.content"

:options="editorOption"

@blur="onEditorBlur($event)"

@focus="onEditorFocus($event)"

@ready="onEditorReady($event)">

这里需要的是，参考网站中有一个地方有误，见图：

这里的config应该写成:options，注意是有s的喔，大家可以去github看看，就是速度有点感人:(，

还有需要注意的是toolbar的配置选项，直接上图了：

需要注意的是外层需要有modules和一个数组包裹，然后在:options="editorOption"添加，少一个都不会成功的喔。下面的是github官网里面的toolbar配置选项(应该是全部的吧)

export default {

theme: 'snow',

boundary: document.body,

modules: {

toolbar: [

['bold', 'italic', 'underline', 'strike'],

['blockquote', 'code-block'],

[{ 'header': 1 }, { 'header': 2 }],

[{ 'list': 'ordered' }, { 'list': 'bullet' }],

[{ 'script': 'sub' }, { 'script': 'super' }],

[{ 'indent': '-1' }, { 'indent': '+1' }],

[{ 'direction': 'rtl' }],

[{ 'size': ['small', false, 'large', 'huge'] }],

[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

[{ 'color': [] }, { 'background': [] }],

[{ 'font': [] }],

[{ 'align': [] }],

['clean'],

['link', 'image', 'video']

]

},

placeholder: 'Insert text here ...',

readOnly: false

}

这里就不解释各个的意思了，大家可以自己试试。祝大家工作顺利！！