不知不觉这么快就到了七月末,记录一下这个月印象比较深的学到用到的一个插件吧,坚持每个月写个一篇,感觉起码没白过。
一开始并不清楚这个富文本组件的相关使用,网上也没有很详细的一些使用介绍说明。迷迷糊糊看了好多别人的文章,之后结合自己实践进行总结一下。
vue-quill-editor 安装、相关配置和属性(觉得真的很详细很清晰):https://www.cnblogs.com/ZaraNet/p/10209226.html
vue-quill-editor 结合element-ui上传图片:https://github.com/NextBoy/skill/issues/2
开发过程中遇到的问题:
1. 工具栏设置
一开始迷茫的是当我根据网上的文档引入 quill-editor 组件之后,工具栏 modules 为什么要这样设置,modules是要放在哪里,根据什么设置?
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange">
</quill-editor>
editorOption: {
modules: {
toolbar:[
['bold', 'italic', 'underline'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['link', 'image']
]},
handlers: {},
placeholder: "一开始提示文本"
}
查看了一下 vue-quill-editor 插件的代码,发现设置菜单选项其实是在 node_modules/vue-quill-editor/src/options.js
option.js 代码其实是设置主题、菜单、默认提示文字和主题等
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': '