vue中使用vue-quill-editor富文本的示例分析-创新互联

小编给大家分享一下vue中使用vue-quill-editor富文本的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余，通常来讲，每个服务器端接收的post的数据大小都是有限制的，这样的话有可能导致提交失败，或者是用户体验很差，数据要传递很久才全部传送到服务器。

1.下载Vue-Quill-Editor

npm install vue-quill-editor --save

2.下载quill（Vue-Quill-Editor需要依赖）

npm install quill --save

3.使用

import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

本次使用到了富文本的封装和上传图片,因要求使用element-ui框架，我上传图片的时候选择了element-ui的Upload上传组件将图片上传到服务器。再将图片链接插入到富文本中，以达到最优的体验。

子组件中将改变的值，直接发送给父组件，父组件来完成逻辑处理

配置中的handlers是用来定义自定义程序的，然而我们配置完后会懵逼地发现，整个富文本编辑器的工具栏的图片上传等按钮都不见了 只保留了几个基本的富文本功能。

这个是因为添加自定义处理程序将覆盖默认的工具栏和主题行为

因此我们要再自行配置下我们需要的工具栏，所有功能的配置如下，大家可以按需配置，这里看起来一大堆，也不美观，大家也可以配置一个单独的config文件引入。

有一点注意的地方，父组件中传入子组件中的值，子组件里面发生改变以后再传给父组件。将变量时存放在props属性中的，我们在调用变量的时候是跟data里面的变量一样的，都是通过this.变量来调用，这个问题就是说父组件传入子组件的变量是不能this.变量直接改变的，要在data或者computed属性里面重新定义一个变量，或者监听props接受变量的变化。改变data或者computed属性里面的变量就不会报错了。

看完了这篇文章，相信你对“vue中使用vue-quill-editor富文本的示例分析”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。