【quill-editor】富文本编辑器对图片的放大缩小拖拽的实现

首先哈，quill-editor没有对图片的功能，文档里也有提到扩展模版

文档：

回归正题=>

1、安装模版

npm i quill-image-drop-module  -S    //拖拽
npm i quill-image-resize-module -S   //放大缩小

2、vue文件引入

import Quill from 'quill'import ImageResize from 'quill-image-resize-module'
import { ImageDrop } from 'quill-image-drop-module'; // 图片拖动组件引用Quill.register('modules/imageResize', ImageResize) // 注册
Quill.register('modules/imageDrop', ImageDrop); // 注册

3、在data里配置些东西

editorOption: {placeholder: '请在这里输入',theme: 'snow', history: {delay: 1000,maxStack: 50,userOnly: false},modules: {imageDrop: true, imageResize: {  displayStyles: {backgroundColor: "black",border: "none",color: "white"},modules: ["Resize", "DisplaySize", "Toolbar"]},toolbar: {container: toolbarOptions, //工具栏handlers: {}},}
}

4、需在webpack里配置些东西,在build/webpack.dev.conf.js和webpack.prod.conf.js，这两个js文件哈都引入下面的代码

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

ps:也可在vue.config.js中配置上面的代码，但我首先是在vue.config.js中配置的哈，但是没用，一直在报“window.Quill is undefined”，不知道是不是因为我是vue2的项目所以没用。

ps:主要的代码是从第四行的new webpack后面的代码，只要引入在plugins里面就可以了，还得引入第一行的webpack。

最后上代码：

<template><quill-editor ref="myText" v-model="content" class="editor"             :options="editorOption"></quill-editor>
</template><script>import Quill from 'quill'import { quillEditor } from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import ImageResize from 'quill-image-resize-module'import { ImageDrop } from 'quill-image-drop-module'; // 图片拖动组件引用Quill.register('modules/imageResize', ImageResize) // 注册Quill.register('modules/imageDrop', ImageDrop); // 注册const toolbarOptions = [['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线['blockquote', 'code-block'],                     //引用，代码块[{ 'header': 1 }, { 'header': 2 }],               // 几级标题[{ 'list': 'ordered' }, { 'list': 'bullet' }],    // 有序列表，无序列表[{ 'script': 'sub' }, { 'script': 'super' }],     // 下角标，上角标[{ 'indent': '-1' }, { 'indent': '+1' }],         // 缩进[{ 'direction': 'rtl' }],                         // 文字输入方向[{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小[{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题[{ 'color': [] }, { 'background': [] }],          // 颜色选择[{ 'font': [] }], // 字体[{ 'align': [] }],    // 居中['clean'],            // 清除样式,['link', 'image'],  // 上传图片、上传视频]export default {components: {quillEditor},data(){return{content:'',editorOption: {placeholder: '请在这里输入',theme: 'snow',history: {delay: 1000,maxStack: 50,userOnly: false},modules: {imageDrop: true,   imageResize: {     displayStyles: {backgroundColor: "black",border: "none",color: "white"},modules: ["Resize", "DisplaySize", "Toolbar"]},toolbar: {container: toolbarOptions, //工具栏handlers: {}},}}}}
</script>

效果图：

最后说一点啊，两个插件是都要安装的，不能只安装一个，不然是会报错的，我就走过这条路。还有一点，这些都是我的亲测有效，如果有什么报错问题可以说下，毕竟我不知道遇上没。

【quill-editor】富文本编辑器对图片的放大缩小拖拽的实现相关推荐

小程序editor 富文本编辑器组件
效果: 关于editor 富文本编辑器组件复制到组件common 里面.json 引用即可链接:https://pan.baidu.com/s/1_QIp28IOVuyVFfKfFZwxKQ 提取 ...
小程序的四次元口袋：editor富文本编辑器的使用、渲染，以及rich-text进行解析
editor富文本 1.介绍富文本编辑器,可以对图片.文字进行编辑.极大地丰富了我们文章的结构样式,之前小程序还没有自己开发富文本插件,而在2019年微信小程序正式发布了富文本api. 支持的类型 ...
Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
froala editor富文本编辑器出现验证失败的解决方法
froala editor富文本编辑器出现验证失败的解决方法出现这种情况,首先要下载源码包地址 https://www.froala.com/wysiwyg-editor 之后引用本地的 froal ...
百度富文本编辑器UEditor 图片宽度100%自适应，手机端
有些时候富文本编辑器的图片在手机端显示超出,没有自动100% 修改ueditor.all.js的23774行(左右,不一定)和24533(左右,不一定),不行就搜索增加内容 loader.setAt ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
富文本在服务器上图片不显示,解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题...
关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题. 本文可能会对以下现象得以解决: 图片上传组件,没有 [上传] 选项卡. 资源无法加载 [imgupload] ( ...
关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...