vue-quill-editor图片缩放处理

1.npm安装插件

2.组件引用

import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop);
Quill.register('modules/imageResize', ImageResize);

3.工具栏配置

     editorOption: {//placeholder: "请输入文本内容12314",modules: {imageDrop: true, //图片拖拽imageResize: {displayStyles: {// 放大缩小backgroundColor: "black",border: "none",color: "white",},modules: ["Resize", "DisplaySize", "Toolbar"],},clipboard: {matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],// 粘贴版，处理粘贴时候带图片},toolbar: {container: [["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线["blockquote"], //引用，代码块[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小[{ list: "ordered" }, { list: "bullet" }], //列表[{ align: [] }],[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色["link", "image"],],},},theme: "snow",},},theme:'snow'},

4.报错

5.webpack配置

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'})
]

}

我这里的配置是这样的，你们如果使用的话按情况来

     module.exports = Object.assign(multipage.create('./src', './', '-'), {
// custom config
chainWebpack: config => {config.resolve.alias.set("Common", resolve("src/common")).set("Http", resolve("src/common/base/http")).set("Conf", resolve("src/common/config"))
},
configureWebpack: {
plugins: [new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'})
]
}
})

设置之后报错问题就解决了，编辑器就可以缩放图片了

vue-quill-editor图片缩放处理相关推荐

现代化富文本编辑器 Quill Editor
介绍近期在弄富文本编辑器相关的内容,其中项目中使用了 Quill Editor(后面简称 Quill).Quill 自称是一个现代化强大的富文本编辑器,它与其它富文本编辑器(例如 UEditor)不 ...
Quill Editor
VUE-QUILL-EDITOR 该文章仅记录学习过程,不展示最终文件源码安装 quill-editor 在对应的目录打开 Terminal 执行以下命令: 安装 editor npm instal ...
quill自定义图片上传
quill是个不错的富文本编辑器,但是它的图片上传是直接将本地图片读成base64跟文本混合在一起,这显然不适合一般开发需求,我们希望插入的是一个图片url,故这里将基于vue.js实现quill的图 ...
vue+vant使用图片预览功能ImagePreview的问题
如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图: 着实让员外百思不 ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
VUE实现前台图片标注（添加矩形框）、放大、缩小、拖拽 -----个人记录
VUE实现前台图片标注(添加矩形框).放大.缩小.拖拽需求:实现图片上自定义多个矩形选框,选框可移动缩放拖动,图片可以放大缩小.拖拽 ,选框内填充标注文字. 框内填充文字基本都会,不多赘述,后期可 ...
Element-ui配合Vue实现走马灯图片自适应效果
elementUI配合Vue实现走马灯图片自适应效果(等比缩放,使得图片缩小不挤压,放大不拉伸变形) 解决方法的原理:监听屏幕视口大小如果'resize',发生改变了,就获取图片的高度height,然 ...
vue 图片剪辑_用vue制作的图片剪辑组件
vue 图片剪辑形状 (vueShapeImg) Picture clipping component made with vue. 用vue制作的图片剪辑组件. View demo 查看演示 Do ...
vue+element实现图片上传及裁剪功能（vue-cropper）
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
quill富文本编辑器quill粘贴图片上传服务器
强大的富文本编辑器:quill github:32k start++,:https://github.com/quilljs/quill quill粘贴图片上传服务器 <link href=&q ...

vue-quill-editor图片缩放处理

1.npm安装插件

2.组件引用

3.工具栏配置

4.报错

5.webpack配置

vue-quill-editor图片缩放处理相关推荐

最新文章

热门文章