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

ops/2024/11/23 5:09:17/

文章目录

    • vue前端实现富文本编辑器的功能需要用到第三方库
      • 1. 安装包
      • 2.全局引入注册
      • 3.组件内使用
      • 4.图片缩放功能实现
        • ①安装包
        • ②注册并添加配置项
        • ③报错解决

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


http://www.ppmy.cn/ops/135988.html

相关文章

linux003.在ubuntu中安装cmake的方法

1.cmake安装程序下载 https://cmake.org/files/v3.30/ 2.解压并下载包 解压cmake压缩包 tar -xvzf cmake.tar.gz进入解压目录 cd cmake-<version>编辑~/.bashrc nano ~/.bashrc在文件的末尾添加如下代码 export PATH/home/xwl/software/cmake/bin:$PATH然后运行以…

C# 5000 转16进制 字节(激光器串口通讯生成指定格式命令)

最近在做一个与激光器用串口进行通讯的程序文档中要求将频率参数以3个字节的方式进行发送。这里记录一下过程。以便以后再有类似问题时可以快速解决。 /// <summary>/// 设置频率/// </summary>/// <param name"sender"></param>/// <par…

自动化立体仓库:详解

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》人俱乐部 完整版文件和更多学习资料&#xff0c;请球友到知识星球【智能仓储物流技术研习社】自行下载。 自动化立体仓库&#xff08;Automated S…

科研实验室的数字化转型:Spring Boot系统

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理实验室管理系统的相关信息成为必然。开发合…

litepal proguardFiles android studio

Step1&#xff1a;settings.gradle.kts or settings.gradle 添加阿里源 dependencyResolutionManagement {repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)repositories {maven(url "https://jitpack.io")maven (url "https://maven.aliyu…

【Excel】拆分多个sheet,为单一表格

Private Sub 分拆工作表() Application.ScreenUpdating True 让屏幕显示操作过程&#xff0c; Dim sht As Worksheet Dim MyBook As Workbook Set MyBook ActiveWorkbook For Each sht In MyBook.Sheets If sht.Visible True Then 隐藏的sheet跳过&#xff0c;否则会报1004无…

人工智能之机器学习5-回归算法2【培训机构学习笔记】

培训班ppt内容&#xff1a; 个人精进总结&#xff1a; 可解释方差 定义 可解释方差的回归评分函数是一种用于评估回归模型性能的指标&#xff0c;以下从其定义、计算公式、取值范围及意义、应用场景等方面进行详细介绍&#xff1a; 可解释方差&#xff08;Explained Varian…

docker 容器的生命周期

使用 docker run 命令启动一个容器时&#xff0c;如果系统关机或者容器被设置为自动清理&#xff08;即使没有使用 --rm 标志&#xff09;&#xff0c;容器的生命周期将取决于几个因素&#xff1a; 系统关机&#xff1a; 如果宿主机在容器运行时突然关机或重启&#xff0c;Dock…