最近的一个项目中,需要用到富文本,项目基于vue开发,使用的是nuxt.js应用框架,在网上找了很多富文本组件,最后选择了vue-quill-editor这个富文本组件,捣鼓了很久,终于在页面中呈现使用了。总结一下。
如果就是单纯的vue,没有nuxt.js的话,那直接下载引用即可。但是因为nuxt默认首页服务端渲染,其他页面客户端渲染,而window对象只在客户端存在,因此最好不要让带富文本的页面出现在首页使用。使用中碰到诸多问题
下载vue-quill-editor
npm install vue-quill-editor --save
插件编写
- 在plugins下创建nuxt-quill-plugin.js
import Vue from 'vue'
//import VueQuillEditor from 'vue-quill-editor'
//Vue.use(VueQuillEditor)
if (process.browser) {
const VueQuillEditor = require('vue-quill-editor/ssr')
Vue.use(VueQuillEditor)
}
在项目中,我是注释掉了上面两条语句。如果在本地使用,还需要将if语句中的,/ssr也去掉才行。
- 然后在nuxt.config.js中引入该插件
plugins: [{src: '~plugins/nuxt-quill-plugin.js', ssr: false}]
同样的,在本地使用时,把后面的ssr:false也去掉,逗号也要去掉哦。
由于nuxt.js是服务端渲染,不注释掉的话,会报错说找不到window。
- 在组件中写入
<quill-editor :options="editorOption"
ref="QuillEditor"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)"
@ready="onEditorReady($event)">
</quill-editor>
这个时候你会发现出来的是错位的。不要着急,还要在组件中引入富文本的css文件
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
computed: {
editor() {
return this.$refs.QuillEditor.quill
}
},
onEditorChange({editor, html, text}) {
this.content=html;
console.log(html)
},
onEditorFocus() {
},
onEditorReady() {
},
onEditorBlur() {
},
到这里,就OK了。在页面中就呈现出了富文本。
自定义toolbar修改工具栏options
通过options来修改但是他的默认值。引入你需要的功能。而且不同功能有不同的写法,现总结如下:
1.只需要填写功能名的
加粗 - bold;
斜体 - italic
下划线 - underline
删除线 - strike
引用- blockquote
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean
这一类的引用 直接['name','name']这种格式就好了
2.需要有默认值的
标题 - header
[{ 'header': 1 }, { 'header': 2 }] 值字体大小
列表 - list
[{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered,bullet
上标/下标 - script
[{ 'script': 'sub'}, { 'script': 'super' }], 值sub,super
缩进 - indent
[{ 'indent': '-1'}, { 'indent': '+1' }], 值-1,+1等
文本方向 - direction
[{ 'direction': 'rtl' }], 值rtl
3.有多个值 以下拉列表形式显示
大小 - size
[{ 'size': ['small', false, 'large', 'huge'] }],
标题 - header
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
4.有系统默认值的功能只需填写一个空数组 就会有出现默认的选项
颜色 - color
背景颜色 - background
字体 - font
文本对齐 - align
他们的格式都是
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }]
这种格式
修改字体大小选择,使用自定义的列表和单位(rem)
在vue-quill-editor这个富文本编辑器里,对于文字的默认样式是small,nomal,large这样,如果我想要修改成12px,14px,16px如何实现呢?
修改组件默认配置:
1、在node_modules找到文件夹-quill-quill.snow.css文件
2、在css文件中,找到下面这组css属性
默认的样式是动态的,我们需要对这个css属性进行覆盖重写:
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
content: '10px';
font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
content: '20px';
font-size: 20px;
}
//默认的样式
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '14px';
font-size: 14px;
}
//rem:需要说明一下,在编辑的时候还是显示px单位,但最终生成的源代码使用rem,因为编辑是在pc上,并且运营人员也只熟悉px这个单位,对rem没有概念。
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.26rem"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.26rem"]::before {
content: '10px';
font-size: 10px;
}
写成这样就覆盖了默认的css样式。然后我们需要在初始化quill的地方(上面引入部分在export default上,下面声明变量的在mounted里面)加上下面的代码:
import Quill from 'quill'
var Size = Quill.import('attributors/style/size');
// Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px'];
Size.whitelist = ['0.26rem', '0.31rem', '0.37rem', '0.41rem', '0.47rem', '0.52rem'];
Quill.register(Size, true);
在自定义字体大小的地方写上我们需要的size,这个大小和我们在css,js里写的大小一样。
'size': ['10px', '12px', '14px', '16px', '18px', '20px']
这样就修改了默认的字体大小样式了。