0
0

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

问题描述：

我们在开发过程中经常会遇到使用富文本编辑器进行操作，当前插件市场上关于富文本的编辑器挺多的，我们就不一一个介绍了，现在我们主要讲解一些vue-quill-editor富文本编辑器的使用操作和注意事项。

效果图

在这里插入图片描述

具体操作使用

1. 安装

  1. npm install vue-quill-editor -S

2. 引入到项目中

有两种挂载方式： 全局挂载 和 在组件中挂载，根据自己的项目需求选择，一般用到富文本编辑都是在某一个项目中，我们这里为了方便大家选择，两种引用方案都写下来以便大家参考：

（1），页面中引用

  1. import{ quillEditor }from'vue-quill-editor'import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'exportdefault{components:{
  2.     quillEditor
  3.   }}

（2），全局中引用

  1. import Vue from'vue'import VueQuillEditor from'vue-quill-editor'// 引入样式import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'
  2.  
  3. Vue.use(VueQuillEditor,/* { 默认全局 } */)

3. 页面上面具体实现

  1. <template><quill-editor 
  2.        class="ql-editor"
  3.        v-model="content" 
  4.        ref="myQuillEditor":options="editorOption" 
  5.        @blur="onEditorBlur($event)" 
  6.        @focus="onEditorFocus($event)"
  7.        @change="onEditorChange($event)"></quill-editor></template><script>exportdefault{data(){return{content:`<p>这是 vue-quill-editor 的内容！</p>`,//双向数据绑定数据// 富文本编辑器配置editorOption:{modules:{toolbar:[['bold','italic','underline','strike'],// 加粗 斜体 下划线 删除线['blockquote','code-block'],// 引用  代码块[{header:1},{header:2}],// 1、2 级标题[{list:'ordered'},{list:'bullet'}],// 有序、无序列表[{script:'sub'},{script:'super'}],// 上标/下标[{indent:'-1'},{indent:'+1'}],// 缩进[{direction:'rtl'}],// 文本方向[{size:['12px',false,'16px','18px','20px','30px']}],// 字体大小[{header:[1,2,3,4,5,6,false]}],// 标题[{color:[]},{background:[]}],// 字体颜色、字体背景颜色[{font:[false,'SimSun','SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial']}],// 字体种类[{align:[]}],// 对齐方式['clean'],// 清除文本格式['link','image','video']// 链接、图片、视频},placeholder:'请输入正文'}}},methods:{// 失去焦点事件onEditorBlur(quill){
  8.             console.log('editor blur!', quill)},// 获得焦点事件onEditorFocus(quill){
  9.             console.log('editor focus!', quill)},// 准备富文本编辑器onEditorReady(quill){
  10.             console.log('editor ready!', quill)},// 内容改变事件onEditorChange({ quill, html, text }){
  11.             console.log('editor change!', quill, html, text)this.content = html
  12.           }}}</script>

到这里一个默认的富文本编辑器已经导入使用了，如下图所视！
在这里插入图片描述

4.为了更好配合使用，样式上面进行优化，使用中文标识方便查看

（1），重新自定义字体类型

  1. import Quill from'quill'// 引入编辑器// 自定义字体大小const Size = Quill.import('attributors/style/size')
  2. Size.whitelist =['10px','12px','16px','18px','20px','30px','32px']
  3. Quill.register(Size,true)// 自定义字体类型var fonts =['SimSun','SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','sans-serif']var Font = Quill.import('formats/font')
  4. Font.whitelist = fonts
  5. Quill.register(Font,true)

（2），自定义对应样式

  1. // 给文本内容加高度，滚动条
  2. .quill-editor /deep/ .ql-container {
  3.     min-height: 220px;
  4.   }
  6.   .ql-container {
  7.     min-height: 230px;
  8.   }
  10.  /deep/ {
  11.     .ql-snow .ql-tooltip [data-mode="link"]::before {
  12.       content: "请输入链接地址:";
  13.       left: 0;
  14.     }
  16.     .ql-snow .ql-tooltip.ql-editing {
  17.       left: 0 !important;
  18.     }
  20.     .ql-snow .ql-tooltip {
  21.       left: 0 !important;
  22.     }
  24.     .ql-snow .ql-editor {
  25.       max-height: 300px;
  26.     }
  28.     .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  29.       border-right: 0px;
  30.       content: "保存";
  31.       padding-right: 0px;
  32.     }
  34.     .ql-snow .ql-tooltip[data-mode="video"]::before {
  35.       content: "请输入视频地址:";
  36.     }
  38.     .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  39.       content: "14px" !important;
  40.       font-size: 14px;
  41.     }
  43.     .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 {
  44.       content: "10px" !important;
  45.       font-size: 10px;
  46.     }
  48.     .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  49.       content: "12px" !important;
  50.       font-size: 12px;
  51.     }
  53.     .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  54.       content: "16px" !important;
  55.       font-size: 16px;
  56.     }
  58.     .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  59.       content: "18px" !important;
  60.       font-size: 18px;
  61.     }
  63.     .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 {
  64.       content: "20px" !important;
  65.       font-size: 20px;
  66.     }
  68.     .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
  69.       content: "30px" !important;
  70.       font-size: 30px;
  71.     }
  73.     .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  74.       content: "32px" !important;
  75.       font-size: 32px;
  76.     }
  78.     .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  79.       content: "文本" !important;
  80.     }
  82.     .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  83.       content: "标题1" !important;
  84.     }
  86.     .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  87.       content: "标题2" !important;
  88.     }
  90.     .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  91.       content: "标题3" !important;
  92.     }
  94.     .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  95.       content: "标题4" !important;
  96.     }
  98.     .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  99.       content: "标题5" !important;
  100.     }
  102.     .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  103.       content: "标题6" !important;
  104.     }
  106.     .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  107.       content: "标准字体" !important;
  108.     }
  110.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  111.       content: "衬线字体" !important;
  112.     }
  114.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  115.       content: "等宽字体" !important;
  116.     }
  118.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
  119.       content: "宋体" !important;
  120.       font-family: "SimSun";
  121.     }
  123.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
  124.       content: "黑体" !important;
  125.       font-family: "SimHei";
  126.     }
  128.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
  129.       content: "微软雅黑" !important;
  130.       font-family: "Microsoft YaHei";
  131.     }
  133.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
  134.       content: "楷体" !important;
  135.       font-family: "KaiTi";
  136.     }
  138.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
  139.       content: "仿宋" !important;
  140.       font-family: "FangSong";
  141.     }
  143.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  144.       content: "Arial" !important;
  145.       font-family: "Arial";
  146.     }
  148.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
  149.       content: "Times New Roman" !important;
  150.       font-family: "Times New Roman";
  151.     }
  153.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  154.       content: "sans-serif" !important;
  155.       font-family: "sans-serif";
  156.     }
  158.     .ql-font-SimSun {
  159.       font-family: "SimSun";
  160.     }
  162.     .ql-font-SimHei {
  163.       font-family: "SimHei";
  164.     }
  166.     .ql-font-Microsoft-YaHei {
  167.       font-family: "Microsoft YaHei";
  168.     }
  170.     .ql-font-KaiTi {
  171.       font-family: "KaiTi";
  172.     }
  174.     .ql-font-FangSong {
  175.       font-family: "FangSong";
  176.     }
  178.     .ql-font-Arial {
  179.       font-family: "Arial";
  180.     }
  182.     .ql-font-Times-New-Roman {
  183.       font-family: "Times New Roman";
  184.     }
  186.     .ql-font-sans-serif {
  187.       font-family: "sans-serif";
  188.     }
  190.     .ql-snow.ql-toolbar .ql-formats .ql-revoke {
  191.       background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
  192.       width: 20px;
  193.       height: 20px;
  194.       filter: grayscale(100%);
  195.       opacity: 1;
  196.     }
  198.     .ql-snow.ql-toolbar .ql-formats .ql-revoke:hover {
  199.       background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
  200.       width: 20px;
  201.       height: 20px;
  202.       filter: none;
  203.       opacity: 0.9;
  204.     }
  206.     img {
  207.       filter: grayscale(100%);
  208.       opacity: 1;
  209.     }
  211.     img:hover {
  212.       filter: none;
  213.       opacity: 0.9;
  214.     }
  216.     /*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
  217.     .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  218.       border-color: #ccc;
  219.       height: 125px;
  220.       overflow: auto;
  221.     }
  222.   }

（3），注意点：富文本里面的下拉框默认是不滚动的，想要滚动效果，加上下面的css

  1. /*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  2.   border-color: #ccc;height: 125px;overflow: auto;}

在这里插入图片描述

5.上传图片到七牛云

vue-quill-editor 默认的是以 base64 保存图片，会直接把图片 base64 和内容文本一起以字符串的形式提交到后端。这样小图片还行，如果要上传大图片会提示上传失败，优秀的前端打字员显然不会这样做。

思路
可以先将图片上传至服务器，再将图片链接插入到富文本中显示
图片上传可以自定义一个组件或者使用 element-ui 的上传图片的组件（我在项目中使用的是自定义的组件，这里演示使用 element-ui 组件上传）
上传图片的组件需要隐藏，点击图片上传时调用element-ui 的图片上传，上传成功后返回图片链接。
在编辑器项中配置配置项

  1. <el-upload
  2.   v-show="false"class="avatar-uploader":data='fileUpload':show-file-list="false":http-request="onUploadHandler"></el-upload>

在option中配置上传操作，之前的option就耀稍作修改

  1. handlers:{'image':function(value){if(value){// value === true
  2.                   document.querySelector('.avatar-uploader input').click()}else{this.quill.format('image',false)}}}
  1.  点击富文本上的上传图片，就会触发这里的handlers，将操作引到upload的函数上，在这个函数里面需要做的操作是，将图片上传到七牛云，并拿到返回的在线链接，然后将图片链接插入到页面对应位置上。这里我的上传是自己封装了函数。
  1. asynconUploadHandler(e){const imageUrl = 上传七牛云后返回来的一串在线链接
  2.  
  3.       // 获取光标所在位置let quill =this.$refs.myQuillEditor.quill
  4.       let length = quill.getSelection().index
  5.       // 插入图片  
  6.       quill.insertEmbed(length,'image', imageUrl)// 调整光标到最后
  7.       quill.setSelection(length +1)// this.content += url}

6.自定义控制图片大小

（1），安装插件

  1.  npm i quill-image-resize-module -S

（2），在文件中导入包

  1. import Quill from'quill'import ImageResize from'quill-image-resize-module' 
  2. Quill.register('modules/imageResize', ImageResize)

（3），在原本的配置项上添加（与toolbar平级进行配置）

  1. toolbar:{},// 调整图片大小imageResize:{displayStyles:{backgroundColor:'black',border:'none',color:'white'},modules:['Resize','DisplaySize','Toolbar']}

效果：
在这里插入图片描述

7.自定义toobar样式设计

  1. //在quill中使用toolbar:{container: toolbarOptions,handlers:{**report:this.openWorkReport**}}// 方法中使用openWorkReport(){this.$emit('openWorkReport')},// 样式/* 自定义toobar样式设计 *//* 工作汇报弹窗 */.ql-snow.ql-toolbar .ql-formats .ql-report{background:url("../images/meeting/report.png") no-repeat;
  2.     background-size: contain;display: inline-block;height: 18px;margin: 3px 5px;width: 28px;}

效果

在这里插入图片描述
有关视频上传参考：视频上传

标签： vue.js javascript 前端
本文转载自: https://blog.csdn.net/qq_44552416/article/details/125800645
版权归原作者 SwJieJie 所有， 如有侵权，请联系我们删除。
登录后发布评论

“vue使用富文本编辑器vue-quill-editor”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。