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

vue富文本使用editor

news 2025/6/30 16:54:57

富文本【图片上传、缩放、拖动和不能复制只能根据点击图片上传到服务器】

<div id="editorId"><quill-editorref="myQuillEditor"v-model.trim="addForm.content":options="editorOption":disabled="isDisable"@change="onEditorChange($event)"></quill-editor><inputtype="file"accept=".png,.jpg,.jpeg"@change="changeUpload"id="upload"style="display: none;"><span class="wordNumber">{{ wordNumber}}/2000</span></div>//给这个富文本加样式#editorId {width: 100%;max-height: 300px;overflow-y: scroll;
}

先下载插件并且引入

import { quillEditor} from "vue-quill-editor";
import { container, ImageExtend } from "quill-image-extend-module"
import ImageResize from 'quill-image-resize-module'
import { ImageDrop } from 'quill-image-drop-module';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import Quill from "quill"  //注意一定要引入这个才能使用图片缩放
Quill.register("modules/ImageExtend", ImageExtend)
Quill.register("modules/ImageResize", ImageResize)
Quill.register('modules/imageDrop', ImageDrop);
export default {components: {quillEditor,},data() {return {editorOption: {placeholder: "编辑文章内容",theme: 'snow',modules: {clipboard: {// 粘贴板，处理粘贴图片  *** 主要是这里matchers: [[Node.ELEMENT_NODE, this.desMatcher]],},imageDrop: true,imageResize: {   //添加displayStyles: {backgroundColor: 'black',border: 'none',color: 'white'},modules: ['Resize', 'DisplaySize', 'Toolbar']},ImageExtend: {loading: true,name: "pictureFile",},toolbar: {// container: container,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) {if (value) {document.querySelector('#upload').click()}}}}}},isDisable: false,wordNumber: ''};},methods: {changeUpload(e) {let file = e.target.files[0]const formData = new FormData()formData.append('file', file)this.$axios({method: "post",url: "/sys/fileOps/uploadFile",data: formData,headers: {'Content-Type': 'multipart/form-data'}}).then((res) => {let quill = this.$refs.myQuillEditor.quillif (res.data.code === 200) {//光标位置let length = quill.getSelection().index// 插入图quill.insertEmbed(length, "image", res.data.data)//  调整光标quill.setSelection(length + 1)} else {this.$message.error(res.data.message);}}).catch((err) => {console.log(err, '===');this.$message.error('系统错误');});},//内容改变事件onEditorChange(e) {e.quill.deleteText(800, 4);if (e.html == '') {this.wordNumber = 0} else {this.wordNumber = e.quill.getLength() - 1}},// 复制图片判断desMatcher(node, Delta) {console.log(Delta, '===')let ops = []Delta.ops.forEach(op => {if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片，这里会是一个对象，所以可以这样处理ops.push({insert: op.insert,})} else {if (op.insert.image.includes('file://') || op.insert.image.includes('data:image')) {  //本地图片会使文件file开头this.$message.warning('不允许粘贴图片,请手动上传')} else {ops.push({insert: op.insert,})}}})Delta.ops = opsreturn Delta}},created() { },mounted() { },
};

注意图片缩放和拖动要在build 文件夹中webpack.base.conf.js文件里面添加

module.exports = {plugins: [new webpack.ProvidePlugin({// 在这儿添加下面两行'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'})]
};

或者没有webpack就在vue.config.js中加入configureWebpack中配置

var webpack = require('webpack');
module.exports = {// 要引入webpackconfigureWebpack: {plugins: [new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js',//注意路径，可能与你们路径不一致'Quill': 'quill/dist/quill.js' //注意路径，可能与你们路径不一致}),]}
}