使用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，不然文本编辑器会出现不规则黑白几何图形
//这三个css可以在main.js中引入，也可以在具体使用的.vue文件中引入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

3、新增自定义功能
1 ) Quill中富文本编辑的操作按钮都为英文，需要中文译一下，根据项目功能需求有两种情况：

如果有语言切换的需求，就需要准备语言包按照api的引用方法实现；
如果只有一种语言的要求，就可以通过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': '清除字体样式'
}
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 style="color: rgb(51, 51, 51);">虞美人 》</strong></h1><h2 class="ql-align-center"> 李煜</h2><p><br></p><h3><br></h3><h3 class="ql-align-center"> <span class="ql-size-large" style="color: rgb(230, 0, 0);">春花</span>秋月何时了，<span class="ql-size-large" style="color: rgb(0, 138, 0);">往事</span>知多少？小楼昨夜又<span class="ql-size-large" style="color: rgb(240, 102, 102);">东风</span>，故国不堪回首月明中！</h3><h2 class="ql-align-center"><span class="ql-size-large"> </span>雕栏玉砌应犹在，只是朱颜改。<span class="ql-size-large" style="color: rgb(161, 0, 0);">问君能有几多愁？恰似一江春水向东流。</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替换原来的图片数据；其二是对控件本身下手，首先将图片上传，然后插入到富文本中。

使用vue-quill-editor实现富文本编辑器相关推荐

Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战
优秀的富文本编辑器有很多,比如:UEditor,wangEditor 等,但并不是每个都能在移动端有很好的表现. 我们暂且不讨论移动端是否真的需要富文本,既然有这需求,就把它实现出来. 失败的尝试正 ...
quill——简单的富文本编辑器
先介绍一下一般网页如何实现 quill 富文本编辑器引入 quill.js 文件 <script src="https://cdn.quilljs.com/1.3.3/quill.j ...
在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻.公告的功能,自然而然就需要用到了富文本编辑器. UEditor.Simditor.wangEditor.CKEditor.TinyMCE.Quill,这是当前比较热门的 ...
ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程
在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于 ...
vue问题四：富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...
uni-app的editor的富文本编辑器
在官方文档中教程真是也太简单了, 大家可以在官方代码中找到完整的内容 https://github.com/dcloudio/hello-uniapp/blob/master/pages/compon ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
vue中使用element-tiptap富文本编辑器
element-tiptap富文本编辑器 npm安装 npm install element-tiptap --save yarn安装 yarn add element-tiptap 全局引入 imp ...

使用vue-quill-editor实现富文本编辑器

使用vue-quill-editor实现富文本编辑器相关推荐

最新文章

热门文章