使⽤vue-quill-editor实现富⽂本编辑器
⼀、什么是富⽂本编辑器?
简单介绍⼀下，看过上⾯的图，您⼤致对富⽂本编辑器有个了解了，传统的textArea输⼊框输⼊的内容没法做格式上的更改，它的功能跟我们的word⼀样，可以对其中内容的格式做⼀些调整，还可以添加图⽚等等，它在开发中有个专有名词，叫富⽂本编辑器。
1、ueditor
国内⼈⽤ueditor的⽐较多，真的很中国化，经常在贴吧或论坛⾥看到这种风格的富⽂本编辑器。
2、bootstrap-wysiwyg
这个插件是bootstrap官⽹推荐的。
3、vue-quill-editor
这个据说⼤企业⽤的⽐较多，百度⼀下技术背景，对它的评价是不限制框架，但是需要定制，理念很先进。
⼆、主要研究学习第三种vue-quill-editor富⽂本编辑
在HUI-VUE中使⽤
1、安装依赖
npm install vue-quill-editor –save
2、使⽤
可以在main.js中引⼊
import { quillEditor } from 'vue-quill-editor'
//⼀定要引⼊这三个css，不然⽂本编辑器会出现不规则⿊⽩⼏何图形
，也可以在具体使⽤的.vue⽂件中引⼊
import 'quill/ss'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
3、新增⾃定义功能
1 ) Quill中富⽂本编辑的操作按钮都为英⽂，需要中⽂译⼀下，根据项⽬功能需求有两种情况：
1. 如果有语⾔切换的需求，就需要准备语⾔包按照api的引⽤⽅法实现；
2. 如果只有⼀种语⾔的要求，就可以通过css的content属性更改。
2）按钮多为图标显⽰，⽤户使⽤起来不能清楚明⽩功能按钮的作⽤，需要加上⼀个⿏标停留按钮提⽰的交互：
⾸先建⼀个quill-title.js
将每个按钮的对应class拾取出来进⾏提⽰语循环增加title，代码实现如下：
const titleConfig = {
'ql-bold': '加粗',
'ql-color': '颜⾊',
'ql-font': '字体',
'ql-code': '插⼊代码',
'ql-italic': '斜体',
'ql-link': '添加链接',
'ql-background': '背景颜⾊',
'ql-size': '字体⼤⼩',
'ql-strike': '删除线',
'ql-script': '上标/下标',
'ql-underline': '下划线',
'ql-blockquote': '引⽤',
'ql-header': '标题',
'ql-indent': '缩进',
'ql-list': '列表',
'ql-align': '⽂本对齐',
'ql-direction': '⽂本⽅向',
'ql-code-block': '代码块',
'ql-formula': '公式',
'ql-image': '图⽚',
'ql-video': '视频',
'ql-clean': '清除字体样式'
}
asp富文本编辑器
export function addQuillTitle () {
const oToolBar = document.querySelector('.ql-toolbar'),
aButton = oToolBar.querySelectorAll('button'),
aSelect = oToolBar.querySelectorAll('select')
aButton.forEach(function (item) {
if (item.className === 'ql-script') {
item.value === 'sub' ? item.title = '下标' : item.title = '上标'
} else if (item.className === 'ql-indent') {
item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进'
} else {
item.title = titleConfig[item.classList[0]]
}
})
aSelect.forEach(function (item) {
item.parentNode.title = titleConfig[item.classList[0]]
})
}
其次将quill-title.js引⼊
import { addQuillTitle } from './modules/quill-title.js'
最后在⽣命周期mounted中调⽤⽅法：
addQuillTitle();
最终实现了⿏标悬停按钮完成tooltip提⽰。
4、问题
1）在富⽂本编辑器⾥输⼊并排布好的版⾯和样式在回显时候出现不⼀致。字体⼤⼩样式丢失，⾸先看编辑器完成返回的html字符串：
'<h1 class="ql-align-center">《 <strong >虞美⼈》</strong></h1><h2 class="ql-align-center"> 李煜</h2><p><br></p><h3><br ></h3><h3 class="ql-align-center"> <span class="ql-size-large" >春花</span>秋⽉何时了，<span class="ql-size-large" >往事</span>知多少？⼩楼昨夜⼜<span class="ql-size-large" >东风</span>，故国不堪回⾸⽉明中！</h 3><h2 class="ql-align-center"><span class="ql-size-large"> </span>雕栏⽟砌应犹在，只是朱颜改。<span class="ql-size-large" >问君能有⼏多愁？恰似⼀江春⽔向东流。</span></h2><p  class="ql-align-justify"><br></p>'
会发现在编辑器返回的字符串中，字号在加⼤的情况下Quill编辑器会在标签上增加⼀个class，然后再去定位这个class的样式丢失的原因：
到quill中控制回显样式的css⽂件不难发现在内部的类和标签样式前需要有⼀个⽗级元素class=”ql-editor”的class名，来确保⼦元素样式被匹配到。最后问题得以解决。
三、图⽚上传实现⽅式：
vue-quill-editor插⼊图⽚的⽅式是将图⽚转为base64再放⼊内容中，这样就会产⽣⼀个问题，如果图⽚⽐较⼤的话，富⽂本的内容就会很⼤，内容存在数据库中的，这样⼀来，⼀⽅⾯会占⽤⼤量的数据库存储空间，另⼀⽅⾯当图⽚太⼤的时候富⽂本的内容，会超过数据库的存储上限，从⽽会产⽣内容被截断从⽽显⽰不全的问题（即使是text类型，也有存储上限65535）。
那么问题来了，如何将图⽚上传到⾃⼰的服务器或第三⽅服务，然后将获得的图⽚url插⼊到⽂本中呢？⼤致有两个⽅法，其⼀是将任务交给服务端，服务端截取base64图⽚并转化为⽂件，将其路径或者url替换原来的图⽚数据；其⼆是对控件本⾝下⼿，⾸先将图⽚上传，然后插⼊到富⽂本中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。