前言
以前我对富文本的使用和保存不是很懂，停留在理解为textarea就是富文本的阶段，后来接触到了UEditor，被它华丽的外表所惊艳，按钮多功能丰富，但是使用起来却没那么顺手。
慢慢开始学习前端开发框架，学习使用Vue就开始正视前端的学习其中接触到了vue-quill-editor和Tinymce，学Vue的这两款应该都会接触到但从功能上来讲Tinymce肯定优秀一点，但是我自己觉得vue-quill-editor更适合我的项目一些，我就使用了vue-quill-editor，接下来介绍一下我的使用心得。
关键词
安装和使用 、固定长度、内部滚动条、滚动条样式修改、修改图片大小
正文
首先是安装
npm install vue-quill-editor --save-dev
然后是在src/main.js引入
// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
// 将富文本编辑器，注册为全局可用组件
Vue.use(VueQuillEditor)
使用方式
v-model="content"
ref="myQuillEditor"
:options="editorOption"
>
工具栏是可以自己定义的：
editorOption: {
scrollingContainer: '#editorcontainer',
placeholder: '',
// or 'bubble'
theme: 'snow',
modules: {
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: ['Resize', 'DisplaySize', 'Toolbar']
},
toolbar: {
// 工具栏
container: toolbarOptions.toolbarOptions,
handlers: {
'image': function (value) {
if (value) {
} else {
this.quill.format('image', false)
}
}
}
}
}
}
我将toolbarOptions单独存为一个文件，内容如下：
const toolbarOptions = [
// toggled buttons
['bold', 'italic', 'underline', 'strike'],
['blockquote'],
// custom button values
[{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}],
// superscript/subscript
[{'script': 'sub'}, {'script': 'super'}],
// outdent/indent
[{'indent': '-1'}, {'indent': '+1'}],
// text direction
[{'direction': 'rtl'}],
[{'size': ['10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '32px', '48px']}],
// custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
// dropdown with defaults from theme
[{'color': []}, {'background': []}],
[{'font': []}],
[{'align': []}],
['image'],
// remove formatting button
['clean']
]
export default {
toolbarOptions
}
前端如何展示富文本呢？
这里有一个地方是重点，就是class="ql-editor"，因为我在使用p标签的时候发现，有时候字体不生效，居中不生效，原来是没加这个class。
样式修改
首先是如何修改富文本框大小的问题，一开始为了让富文本大小不是特别小，我使用了这一点样式来配置：
/* 编辑器初始高度 */
.ql-editor{
min-height: 6rem;
}
当超出行的时候，整个页面都会被拉长，整个页面出现滚动条，而不是行内扩充，出现滚动条
这个问题的主要原因是我对CSS样式的使用不熟，解决办法如下：
内部滚动条
/* 编辑器内部出现滚动条 */
.ql-container{
overflow-y:auto;
height:8rem!important;
}
然而滚动条还是太丑了。
修改滚动条样式
/*滚动条整体样式*/
.ql-container ::-webkit-scrollbar{
width: 10px;/*竖向滚动条的宽度*/
height: 10px;/*横向滚动条的高度*/
}
.ql-container ::-webkit-scrollbar-thumb{/*滚动条里面的小方块*/
background: #666666;
border-radius: 5px;
}
.ql-container ::-webkit-scrollbar-track{/*滚动条轨道的样式*/
background: #ccc;
border-radius: 5px;
}
这样一改，滚动条就好看多了吧？是不是？
修改图片大小
上传的图片如果不能修改大小那真是灾难，所以还是要修改大小的组件，还好已经有人解决了这个组件
一样的，首先是安装
npm install quill-image-resize-module --save-dev
在src/main.js引入
import imageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', imageResize)
使用效果如下：
总结
富文本的使用，没有最好的，只有最适合自己的，我在这里遇到很多坑，有的是上网搜解决的，有的是自己冥思苦想出来的，主要还是前端的知识没有那么熟练导致的，所以现在愈发的对前端的开发重视起来，认真总结经验，让前端更加熟悉。
在使用富文本的时候，肯定会遇到图片的上传问题，要么直接传文件流然后以图片的形式保存，数据库保存路径即可，要么是以base64传字符串，到了后台要么转换回图片，要么就以base64保存到数据库，显然在数据库保存图片路径才是最佳的选择，至于你以什么方式传都行，然后前端需要回传一个图片的地址即可，下一篇我就将介绍，vue-quill-editor是如何上传图片并回传地址的。