vue项目中富文本编辑器的实现

vue前端实现富文本编辑器的功能需要用到第三方库

vue2使用vue-quill-editor，vue3使用@vueup/vue-quill，由于我测试使用的是vue3，所以该文章讲解的是@vueup/vue-quill的使用

步骤：

1. 安装包

npm i @vueup/vue-quill

2.全局引入注册

在main.js中

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
const app=createApp(App)
app.component('QuillEditor', QuillEditor)

3.组件内使用

<template><div>富文本编辑器<el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess"class="editor-img-uploader" accept=".jpeg,.jpg,.png,.svg" :on-error="handleUploadError":show-file-list="false"><el-button ref="uploadRef" icon="plus" class="editor-img-uploader">上传</el-button></el-upload><div class="editor"><QuillEditor id="editorId" ref="myQuillEditor" v-model:content="editorContent"@update:content="onContentChange" :options="options" :placeholder="placeholder"/></div></div>
</template>
<script>
const titleConfig=[{Choice:'.ql-insertMetric',title:'跳转配置'},{Choice:'.ql-bold',title:'加粗'},{Choice:'.ql-italic',title:'斜体'},{Choice:'.ql-underline',title:'下划线'},{Choice:'.ql-header',title:'段落格式'},{Choice:'.ql-strike',title:'删除线'},{Choice:'.ql-blockquote',title:'块引用'},{Choice:'.ql-code',title:'插入代码'},{Choice:'.ql-code-block',title:'插入代码段'},{Choice:'.ql-font',title:'字体'},{Choice:'.ql-size',title:'字体大小'},{Choice:'.ql-list[value="ordered"]',title:'编号列表'},{Choice:'.ql-list[value="bullet"]',title:'项目列表'},{Choice:'.ql-direction',title:'文本方向'},{Choice:'.ql-header[value="1"]',title:'h1'},{Choice:'.ql-header[value="2"]',title:'h2'},{Choice:'.ql-align',title:'对齐方式'},{Choice:'.ql-color',title:'字体颜色'},{Choice:'.ql-background',title:'背景颜色'},{Choice:'.ql-image',title:'图像'},{Choice:'.ql-video',title:'视频'},{Choice:'.ql-link',title:'添加链接'},{Choice:'.ql-formula',title:'插入公式'},{Choice:'.ql-clean',title:'清除字体格式'},{Choice:'.ql-script[value="sub"]',title:'下标'},{Choice:'.ql-script[value="super"]',title:'上标'},{Choice:'.ql-indent[value="-1"]',title:'向左缩进'},{Choice:'.ql-indent[value="+1"]',title:'向右缩进'},{Choice:'.ql-header .ql-picker-label',title:'标题大小'},{Choice:'.ql-header .ql-picker-item[data-value="1"]',title:'标题一'},{Choice:'.ql-header .ql-picker-item[data-value="2"]',title:'标题二'},{Choice:'.ql-header .ql-picker-item[data-value="3"]',title:'标题三'},{Choice:'.ql-header .ql-picker-item[data-value="4"]',title:'标题四'},{Choice:'.ql-header .ql-picker-item[data-value="5"]',title:'标题五'},{Choice:'.ql-header .ql-picker-item[data-value="6"]',title:'标题六'},{Choice:'.ql-header .ql-picker-item:last-child',title:'标准'},{Choice:'.ql-size .ql-picker-item[data-value="small"]',title:'小号'},{Choice:'.ql-size .ql-picker-item[data-value="large"]',title:'大号'},{Choice:'.ql-size .ql-picker-item[data-value="huge"]',title:'超大号'},{Choice:'.ql-size .ql-picker-item:nth-child(2)',title:'标准'},{Choice:'.ql-align .ql-picker-item:first-child',title:'居左对齐'},{Choice:'.ql-align .ql-picker-item[data-value="center"]',title:'居中对齐'},{Choice:'.ql-align .ql-picker-item[data-value="right"]',title:'居右对齐'},{Choice:'.ql-align .ql-picker-item[data-value="justify"]',title:'两端对齐'},
]
export default {props:{content:{type:String,default:''},readOnly:{type:Boolean,default:false,},fileSize:{type:Number,default:10}},emits:['update:content','getFileId','handleRichTextContentChange'],data() {return {uploadUrl:'https://jsonplaceholder.typicode.com/posts/',imageUrl:'',options: {theme: 'snow',modules: {toolbar: {container: [['bold', 'italic','underline','strike'],//加粗 斜体 下划线 删除线[{color: []}, {background: []}],// 字体颜色、字体背景颜色[{align: []}],// 对齐方式[{ size:['small',false,'large','huge']}],// 字体大小[{font: []}],// 字体种类[{ header:[1,2,3,4,5,6,false]}],// 标题// [{ direction:'ltr'}],// 文本方向[{ direction:'rtl'}],// 文本方向[{indent: '-1'}, {indent: '+1'}],// 缩进[{list:'ordered'},{list:'bullet'}],// 有序、无序列表[{script:'sub'},{script:'super'}],// 上标/下标['blockquote', 'code-block'],//引用 代码块['clean'],// 清除文本格式['link','image','video'],// 链接、图片、视频],handlers:{// 重写图片上传事件image: (value)=>{if(value){this.$refs.uploadRef.$el.click()}else{Quill.format('image',true)}}},}}},placeholder:'请输入公告内容...',clipboard:{matchers:[['img',(node,delta)=>{const src=node.getAttribute('src')const id=node.getAttribute('id')delta.insert({image:{src,id}})}]]},}},computed:{editorContent:{get(){return this.content},set(val){this.$emit('update:content',val)}}},methods:{// 监听富文本内容变化，删除被服务器中被用户回车删除的图片onContentChange(content){// console.log(content.ops[0].insert)this.$emit('handleRichTextContentChange',content)},// 上传前校验格式和大小handleBeforeUpload(file){const type=['image/jpeg','image/jpg','image/png','image/svg']const isJPG=type.includes(file.type)if(!isJPG){this.$message.error('图片格式错误！只能上传jpeg/jpg/png/svg格式')return false}//  校验文件大小if(this.fileSize){const isLt=file.size/1024/1024<this.fileSizeif(!isLt){this.$message.error(`上传文件大小不能超过${this.fileSize}MB`)return false}}return true},// 上传成功处理handleUploadSuccess(res,file){// 如果上传成功if(file.status==='success'){let rawMyQuillEditor=this.$refs.myQuillEditor// 获取富文本实例let quill= rawMyQuillEditor.getQuill()// 获取光标所在位置let length=quill.selection.savedRange.index// // 插入图片，生成图片链接地址this.imageUrl=  URL.createObjectURL(file.raw)const imageId=res.idquill.insertEmbed(length,'image','https://img0.baidu.com/it/u=2119690721,2710382574&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422')quill.setSelection(length+1)this.$emit('getFileId',imageId)}else{this.$message.error('图片插入失败')}},// 上传失败处理handleUploadError(){this.$message.error('图片插入失败')},// 增加hover工具栏有中文提示initTitle(){document.getElementsByClassName('ql-editor')[0].dataset.placeholder=''for (let item of titleConfig) {let tip=document.querySelector('.ql-toolbar '+item.Choice)if(!tip) continuetip.setAttribute('title',item.title)}}},mounted(){this.initTitle()}
}
</script>
<style lang="scss" scoped>
//通过css样式实现汉化
.editor{width: 100%;:deep(.ql-editor){height: 500px;overflow: auto;}:deep(.ql-toolbar){white-space: pre-wrap;line-height: normal;}
}
.editor-img-uploader{display: none;
}
.ql-snow .ql-tooltip[data-mode='link']::before{content:'请输入链接地址：';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right: 0px;content:'保存';padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode='video']::before{content:'请输入视频地址：';
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before{content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before{content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before{content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before{content: '32px';
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before{content: '文本';
}
.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{content: '标题1';
}
.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{content: '标题2';
}
.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{content: '标题3';
}
.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{content: '标题4';
}
.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{content: '标题5';
}
.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{content: '标题6';
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before{content: '标准字体';
}
.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{content: '衬线字体';
}
.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{content: '等宽字体';
}
</style>

4.图片缩放功能实现

①安装包

上传后的图片可能尺寸不符合我们要求，想要对其进行缩放操作，要实现该功能需要借助另一个第三方库 quill-image-resize-module

npm i quill-image-resize-module

②注册并添加配置项

//在使用富文本编辑器组件的页面
import {Quill} from '@vueup/vue-quill'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/ImageResize', ImageResize)

//在编辑器组件配置项中设置
options: {modules: {toolbar: {......},ImageResize:{//支持图片大小尺寸修改displayStyles:{border:'none',backgroundColor: 'black',color:'white'},modules:['Resize','DisplaySize','Toolbar']}}},

③报错解决

注册并配置好后发现不仅没实现效果，还报错了

解决这一问题，需要在vite.config.js中进行配置

步骤：
Ⅰ.安装包

npm i @rollup/plugin-inject

Ⅱ.配置vite.config.js文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from '@rollup/plugin-inject'
export default defineConfig({plugins: [vue(),inject({'window.Quill':['@vueup/vue-quill','Quill'],})],
})

该文章主要是为了分享和记录
参考文章 https://www.jb51.net/javascript/323881bta.htm
参考文章 https://juejin.cn/post/7402204217517867059?searchId=20241120154217039503B146AA0361F0B8