DDR爱好者之家

Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
站长资源 2024/12/27 佚名
75 1538
DDR爱好者之家 Design By 杰米

使用教程(注意细看总结部分，写了几点，希望有所帮助)：
1、安装插件：npm install vue-quill-editor
2、安装插件依赖：npm install quill
3、main.js文件中引入：

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'

Vue.use(VueQuillEditor)
new Vue({
 VueQuillEditor,
 render: h => h(App),
}).$mount('#app')

4、vue页面中使用(代码完整，复制就能使用)：

<template>
 <div id="quillEditorId">
  <el-upload
   class="avatarUploader"
   action="https://jsonplaceholder.typicode.com/posts/"
   :show-file-list="false"
   :on-success="handleAvatarSuccess"
   :before-upload="beforeAvatarUpload"
  >
   <img v-if="imageUrl" :src="/UploadFiles/2021-04-02/imageUrl">


总结：




1、变量toolbarOptions表示自定义的工具栏，可以参照官网(官网写的比较简单)或者细看本文代码(有详细注释)；

2、如果不单独处理图片，图片会被直接转义成base64，跟随DOM一块儿上传服务；

3、本文对图片做了自定义处理，选择本地图片时，会单独上传到服务，返回地址后，直接插入到富文本编辑中的当前节点。看代码中editorOption的handlers的image函数，以及插入富文本编辑器当前光标函数beforeAvatarUpload，代码中有详细注释；

4、粘贴板，变量clipboard。如果需要清理复制的自带样式，使用粘贴板进行清理，函数HandleCustomMatcher；

5、对于复制粘贴的情况，多说一句。过程中，编辑器已经将原有的DOM转为编辑器允许存在的DOM元素，所以这块儿不用再处理(处理起来，也会有点复杂)。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米