**摘要：**该富文本编辑器基于 vue-quill-editor进行的二次扩展，实现功能为:
我要评论图片上传功能拦截，上传到ali-oss。安装vue-quill-editor
npm install vue-quill-editor --save
注意：
1. 一定不要忘了 -save ，否则的话可能会导致富文本框加载失败
2. 安装完成之后，查看package.json文件中的dependencies里是否有安装好的vue-quill-editor这个插件，如果没有加--save，则dependencies中可能不会有这个插件，而是再devDependencies中，这个时候浏览器会报错，因为该功能已经开发很久了，报错信息暂时无法提供
在vue中如果需要对图片进行缩放，需要使用该插件，注意需要将该插件通过webpack注册到全局中，才能进行正常使用（vue3.0中的注册方法，vue2.0自行百度）
chainWebpack: (config) => {
config.plugin('provide').use(webpack.ProvidePlugin, [{
'window.Quill': 'quill'
}]);
}
vue-quill-editor使用方法：(注释包含在里面)
<template>
<div class="editor">
<input type="file" style="display:none;" id="input" @change.prevent="upLoad()"/>
<quill-editor
v-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 = false
setTimeout(()=>{
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.html
val.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-oss
this.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() {
// 页面加载之后就监听粘贴事件paste
this.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: 是否禁用富文本框输入
有问题的地方请留言，请指教
本文地址：https://blog.csdn.net/qq_31420313/article/details/107359508
如对本文有疑问， 点击进行留言回复！！
蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解
keepalived+haproxy+mycat+mysql高可用搭建配制
vue中子组件的created、mounted生命周期钩子中获取不到props中的值问题
网友评论