当前位置：首页 > news >正文

vue使用富文本编辑器+自由伸缩图片

news 来源：原创 2024/9/20 14:21:04

首先要下载依赖，下方是本人使用的package.json，下载完依赖如果有启动项目失败的情况，建议将依赖版本降低或使用和下方一样的版本
在这里插入图片描述
package.json代码

{"name": "l","version": "0.1.0","private": true,"description": "## Project setup ```npm install ```","author": "lhs","scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"main": ".eslintrc.js","dependencies": {"axios": "^0.19.2","core-js": "^3.31.1","echarts": "^4.8.0","element-ui": "^2.15.2","html2canvas": "^1.4.0","jquery": "^3.5.1","jspdf": "^2.5.0","postcss-px2rem": "^0.3.0","px2rem-loader": "^0.1.9","quill": "^1.3.7","quill-image-drop-module": "^1.0.3","quill-image-resize-module": "^3.0.0","script-loader": "^0.7.2","scss": "^0.2.4","style-resources-loader": "^1.3.3","vue": "^2.6.12","vue-qr": "^3.2.4","vue-quill-editor": "^3.0.6","vue-router": "^3.0.7","vuex": "^3.4.0","vuex-persistedstate": "^2.7.1"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","sass": "^1.28.0","sass-loader": "^8.0.2","vue-template-compiler": "^2.6.11","webpack": "^4.0.0"},"license": "ISC"
}

使用前还要进行引入和注册
main.js代码如下

import Quill from "quill";
import ImageResize from "quill-image-resize-module"; // 引用
import { ImageDrop } from "quill-image-drop-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize); // 注册

vue.config.js代码

const webpack = require('webpack')module.exports = {configureWebpack: {plugins: [new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js',Quill: 'quill/dist/quill.js'})]}}

使用页面代码如下

 <quill-editorclass="editor"v-model="formValidator.inputCenter"ref="myQuillEditor":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@change="onEditorChange($event)"@ready="onEditorReady($event)"></quill-editor><el-uploadclass="upload-demo"ref="upload"v-show="false"action:file-list="fileList":auto-upload="true":http-request="handleUploadForm":headers="headers":show-file-list="false"><span id="upload123" @submit="submitUpload">上传</span></el-upload><script>
//这里的css放到文章结束了，可自行下载
import '@/assets/css/quill/quill.core.css'
import '@/assets/css/quill/quill.snow.css'
import '@/assets/css/quill/quill.bubble.css'import { quillEditor } from 'vue-quill-editor' //export default {components: {quillEditor,},data() {return {editorOption: {//富文本表头的配置项placeholder: '请输入',theme: 'snow',modules: {toolbar: {container: [['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: ['12','14','16','18','20','22','24','28','32','36',],},], // 字体大小[{ header: [1, 2, 3, 4, 5, 6] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色// [{ font: ['songti'] }], // 字体种类[{ align: [] }], // 对齐方式['clean'], // 清除文本格式['image'], // 链接、图片，需要视频的可以加上video],handlers: {//此处是图片上传时候需要使用到的image: function (value) {console.log(value)if (value) {// 点击图片，这里的#upload123要和上传组件的id一致document.querySelector('#upload123').click()}},},},imageDrop: true, // 图片拖拽imageResize: {// 图片放大缩小displayStyles: {backgroundColor: 'black',border: 'none',color: 'white',},modules: ['Resize', 'DisplaySize', 'Toolbar'],},},},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: '两端对齐',},],}},created() {},mounted() {},destroyed() {},computed: {},methods: {async onUploadHandler(e) {const imageUrl = 上传七牛云后返回来的一串在线链接// 获取光标所在位置let quill = this.$refs.myQuillEditor.quilllet length = quill.getSelection().index// 插入图片quill.insertEmbed(length, 'image', imageUrl)// 调整光标到最后quill.setSelection(length + 1)// this.content += url},// 失去焦点事件onEditorBlur(quill) {console.log('editor blur!', quill)},// 获得焦点事件onEditorFocus(quill) {console.log('editor focus!', quill)},// 准备富文本编辑器onEditorReady(quill) {console.log('editor ready!', quill)},// 内容改变事件，只需要这一个方法就够了onEditorChange({ quill, html, text }) {console.log('editor change!', quill, html, text)this.formValidator.inputCenter = html},// 预览handlePreview(val) {this.imageDialog.src = this.$Api.Image.GetOriginalImgUrl + valthis.imageDialog.visible = true},submitUpload(e) {this.$refs.upload.submit()},async handleUploadForm(param) {//文件上传var _this = thislet formData = new FormData()formData.append('file', param.file)var imgtype = param.file.type.toLowerCase().split('/')if (imgtype[1] != 'png' &&imgtype[1] != 'jpeg' &&imgtype[1] != 'bmp' &&imgtype[1] != 'jpg') {return this.$notify({title: '警告',message: '图片格式不正确！',type: 'warning',})}const res = await this.$Api.Image.UploadImg(formData)if (res.ok) {this.scussFile.id = res.data[0]this.scussFile.size = param.file.sizethis.photoId1 = res.data[0]const imageUrl = this.$Api.Image.GetThumbnailImgUrl + this.photoId1// 获取光标所在位置let quill = this.$refs.myQuillEditor.quilllet length = quill.getSelection().index// 插入图片quill.insertEmbed(length, 'image', imageUrl)// 调整光标到最后quill.setSelection(length + 1)this.photoId1Img = this.$Api.Image.GetThumbnailImgUrl + this.photoId1} else {this.$message('上传文件失败，' + data.message)}}},
}
</script>

备注：这个富文本框接受从其他地方复制进来内容，复制word文档里面的格式可能会有标识丢失的问题，图片要单独复制进来，和文字一起选中复制进入富文本框可能会导致图片上传失败

参考文档：
vue-quill-editor富文本编辑器使用步骤
Quill官方中文文档
quill.js源码