vue-quill-editor之图片上传、大小缩放及内容粘贴、长度限制

**摘要：**该富文本编辑器基于 vue-quill-editor进行的二次扩展，实现功能为:

富文本框图片上传功能拦截，上传到ali-oss。
截屏之后，ctrl+c+v复制粘贴到富文本框
文字输入长度限制
内容高度自适应
手动改变图片大小
其余功能与富文本功能保持一致，不作改变

安装quill、vue-quill-editor
npm install quill --save
npm install vue-quill-editor --save

注意： 1. 一定不要忘了 -save ，否则的话可能会导致富文本框加载失败 2. 安装完成之后，查看package.json文件中的dependencies里是否有安装好的vue-quill-editor这个插件，如果没有加--save，则dependencies中可能不会有这个插件，而是再devDependencies中，这个时候浏览器会报错，因为该功能已经开发很久了，报错信息暂时无法提供 3. 富文本vue-quill-editor是基于quill的，所以防止出现意外，最好先安装quill，再安装vue-quill-editor

在vue中如果需要对图片进行缩放，需要使用该插件，注意需要将该插件通过webpack注册到全局中，才能进行正常使用（vue3.0中的注册方法，vue2.0自行百度）

chainWebpack: (config) => {config.plugin('provide').use(webpack.ProvidePlugin, [{'window.Quill': 'quill'}]);
}

vue-quill-editor使用方法：(注释包含在里面)

npm安装vue-quill-editor（富文本编辑器）和quill-image-resize-module、quill-image-extend-module（图片缩放）
注意如果需要修改editor中的样式，那么一定不要在style上面写scoped，只有在全局状态下修改editor样式才会生效，当前组件内修改是不会生效的

<template><div class="editor"><input type="file" style="display:none;" id="input" @change.prevent="upLoad()"/><quill-editorv-model="contentValue"// 有时候样式会出现问题，是因为少加了ql-editor这个class，需要加上class="quill-editor ql-editor"ref="myQuillEditor"style="padding-top:0; display: flex; flex-direction: column;":content="contentValue":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@change="onEditorChange($event)"></quill-editor><span class="wordNumber">{{TiLength}}/4000</span></div>
</template><script>import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可//import 'quill/dist/quill.core.css'//import 'quill/dist/quill.bubble.css'import { quillEditor, Quill } from 'vue-quill-editor' // 调用富文本编辑器import { ImageExtend } from 'quill-image-extend-module'// quill-image-resize-module该插件是用于控制上传的图片的大小import ImageResize from 'quill-image-resize-module' Quill.register('modules/imageResize', ImageExtend);Quill.register('modules/imageResize', ImageResize);export default {props: {content: {type: String,default: ''},disabled: {type: Boolean,default: false}},watch: {content: function(oldV, newV) {this.contentValue = oldV}},components: {quillEditor},data() {return {contentValue: '',flag: true, // 初始化富文本TiLength: 0,editorOption: {placeholder: "",modules: {toolbar: { // 菜单栏（工具栏），手动配置自己需要的富文本功能container: [["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线[{ indent: "-1" }, { indent: "+1" }], // 左右缩进[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小[{ align: [] }], //对齐方式["image", /*"video"*/], //上传图片、上传视频],handlers: {'image': function (value) { // 劫持图片上传，自定义图片上传if (value) {// 通过input的type=file唤醒选择弹框，选择之后自定义上传路径document.querySelector('#input').click()} else {this.quill.format('image', false);}}}},imageResize:{ // 图片缩放比例displayStyles:{backgroundColor:'black',border:'none',color:'white'},modules:['Resize','DisplaySize', 'Toolbar'] // Resize 允许缩放， DisplaySize 缩放时显示像素 Toolbar 显示工具栏}}},}},computed: {editor() {return this.$refs.myQuillEditor.quill;}},created () {this.contentValue = this.content},mounted() {this.pastePic();},methods: {onEditorReady(editor) {// 准备编辑器},onEditorBlur() {}, // 失去焦点事件// 获得焦点事件onEditorFocus(e) {e.enable(!this.disabled); // 禁用文本框},// 内容改变事件onEditorChange(val) {if (this.flag) {this.flag = falsesetTimeout(()=>{this.$refs.myQuillEditor.quill.setSelection(val.html.length + 1)this.TiLength = this.TiLength=val.quill.getLength()-1},20)}this.$emit('editor-content', {value: val.html}) // 触发事件，将富文本框中的值传递出去this.contentValue = val.htmlval.quill.deleteText(4000,4);if(this.contentValue==''){this.TiLength=0}else{this.TiLength=val.quill.getLength()-1}},upLoad() {let files = window.event.target.files[0];if (files.size / 1024 / 1024 > 2) { // 定义上传的图片的大小// this.$message.warning('请上传小于5M的文件');return;}let fileType = ['.jpg', '.png'];let suffix = files.name.substring(files.name.lastIndexOf('.'),files.name.length);if (fileType.indexOf(suffix) === -1) {this.$message.warning('请上传格式为png、jpg的文件');return;}// 自定义上传路径，根据需求上传到对应的服务器，本公司使用的是上传到ali-ossthis.handleUpload(files);},// 上传到阿里云服务器handleUpload(files) {this.ossUpload(files).then((res) => { // 上传成功之后的回调// 获取光标所在位置let length = this.editor.getSelection().index;// 插入图片  res.info为服务器返回的图片地址this.editor.insertEmbed(length, 'image', res.url)// 调整光标到最后this.editor.setSelection(length + 1)}).catch((files) => {this.$message.warning('上传失败');});},// 截屏粘贴到富文本框pastePic() {// 页面加载之后就监听粘贴事件pastethis.editor.root.addEventListener('paste', evt => {if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {evt.preventDefault();[].forEach.call(evt.clipboardData.files, file => {if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {return;}this.handleUpload(file);});}}, false);},}}
</script>
// 注意style不能加scoped。否则修改的.editor的样式是无法生效的
<style lang="scss">.editor {position: relative;.ql-toolbar{border: 1px solid #CDCFD4;height: 40px;background: #F0F2F5;}.ql-editor{min-height:240px;padding: 0;padding-top: 15px;box-sizing: border-box;}.ql-container {img {display: block;}}.wordNumber {position: absolute;right: 13px;bottom: 15px;color: #666666;font-size: 14px;}}
</style>

最后附上图：

使用方法：

// 在需要使用的组件中引入该组件
<editor@editor-content="listenContent":content="quillEditor":disabled="isDisabled"
/>
// editor-content： 实时监听富文本框中输入的值
// content: 富文本框中的初始默认值
// disabled: 是否禁用富文本框输入

vue-quill-editor之图片上传、大小缩放及内容粘贴、长度限制相关推荐

element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
使用vue+elementUi+springBoot实现图片上传，图片删除，图片展示
使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示环境配置准备环境使用软件图片上传图片删除图片显示所有代码均为参考,每个人的方法不一样,效果不一样,该代 ...
elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
Quill富文本图片上传服务器、复制粘贴图片上传
引入: import { ImageExtend, QuillWatch } from "quill-image-extend-module"; Quill.register(&q ...
Quill编辑器实现图片上传功能
我们引入Quill时是可以直接插入图片了,但是是Quill将图片转化成了base64格式,我们如果存数据库的话,肯定不是长久之计,而真正符合我们要求的便是图片上传之后返回图片路径,再插入图片 1.点击 ...
vue基于vant实现图片上传
前言图片上传的功能相信大家再熟悉不过了,实现的方式也有很多,今天教大家在 vue 中用 vant 组件库实现这个简单的操作. 用到的属性和方法属性参数描述类型 before-read 文件读 ...
记一次fastadmin图片上传大小受限制的修改
如题,在使用fastadmin开发后台时遇到一个问题,在富文本编辑器中上传一张大小为8mb的图片,显示图片大小超出限制,于是: 1.首先想到的是文件上传代码里面默认的上传文件大小可能太小,于是目录中找 ...

vue-quill-editor之图片上传、大小缩放及内容粘贴、长度限制

vue-quill-editor之图片上传、大小缩放及内容粘贴、长度限制相关推荐

最新文章

热门文章