解决vue

2024-07-10 21:54| 来源: 网络整理| 查看: 265

一、安装所需插件（所有必要的）

1、安装quill

npm install quill --save

2、安装依赖

npm install quill-image-drop-module -S npm install quill-image-resize-module -S 或者 yarn add quill-image-drop-module yarn add quill-image-resize-module

二、引入和注册

// quill编辑器基本使用所需的import import { quillEditor } from 'vue-quill-editor' import "quill/dist/quill.core.css"; // import styles import "quill/dist/quill.snow.css"; // for snow theme import "quill/dist/quill.bubble.css"; // for bubble theme // 图片大小缩放 import Quill from 'quill' import { ImageDrop } from 'quill-image-drop-module' // 图片拖动组件引用 import ImageResize from 'quill-image-resize-module' // 图片缩放组件引用 Quill.register('modules/imageDrop', ImageDrop) // 注册 Quill.register('modules/imageResize', ImageResize) // 注册

备注：这里导入quill-image-resize-module会报错，解决方案有两种，可以都试试：

①如果是vue cli3，在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' }) ], } }

②在build文件夹下找到 webpack.dev.conf.js 和 webpack.dev.prod.js 文件，在其中 plugins 中添加

// 富文本图片处理 new webpack.ProvidePlugin({ 'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js' }),

三、修改编辑器 editorOption 中的配置

editorOption: { modules: { // 新增下面 imageDrop: true, // 拖动加载图片组件。 imageResize: { //调整大小组件。 displayStyles: { backgroundColor: 'black', border: 'none', color: 'white' }, modules: [ 'Resize', 'DisplaySize', 'Toolbar' ] } } }

【本文地址】

公司简介

联系我们