vue2 vue-quill-editor 富文本
作者：互联网
安装
npm install vue-quill-editor -S
//vue-quill-editor的增强模块
npm install quill-image-extend-module --save-dev
新建 HelloWorld.vue
<template>
<div class="quill-wrap">
<input ref="fileRef" type="file" v-show="false" @change="addImg($event)" />
<quill-editor
ref="myQuillEditor"
v-model="contentData" @change="changeData($event)"
:options="editorOption"
/>
</div>
</template>
<script>
import "quill/dist/quill.snow.css";
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);
import { watermark, client, getFileNameUUID,multipartUpload } from "@/utils/alioss";
export default {
components: { quillEditor },
data() {
const dataThis = this;
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // toggled buttons
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ direction: "rtl" }], // text direction
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
["link", "image", "video"],
// ["clean"], // remove formatting button
];
return {
dataType: 1, //1 图片 2 视频
fileList: [],
editorOption: {
// 富文本框参数设置
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
image: (value) => {
if (value) {
// 当点击.editor-img-plus时。触发上传图片事件
dataThis.dataType = 1;
dataThis.$refs["fileRef"].click();
} else {
this.quill.format("image", false);
}
},
video: (value) => {
if (value) {
// 当点击.editor-img-plus时。触发上传图片事件
dataThis.dataType = 1;
dataThis.$refs["fileRef"].click();
} else {
this.quill.format("video", false);
}
},
},
},
},
},
};
},
model: {
prop: 'content',
event: 'update'
},
props: {
content: ''
},
computed: {
contentData: {
get(){ return this.content;},
set(V){this.$emit('update', V);}
}
},
methods: {
changeData(e){
this.$emit('update', e.html);
},
addImg(event) {
var file = event.target.files[0];
let type = file.type;
if (type.indexOf("image") != -1) {
const isLt2M = file.size / 1024 / 1024 < 5; //5m
if (!isLt2M) {
this.$message.error("图片大小不能超过 5MB!");
return false;
}
} else if (type.indexOf("video") != -1) {
const isLt2M = file.size / 1024 / 1024 < 30; //30m
if (!isLt2M) {
this.$message.error("视频大小不能超过 30MB!");
return false;
}
} else {
this.$message.error("文件格式错误");
return false;
}
let fileName = '';
if(type.indexOf('image') != -1){
fileName = getFileNameUUID()+'.jpg';
}else if(type.indexOf('video') != -1){
fileName = getFileNameUUID()+'.mp4';
}
this.openFullScreen();
multipartUpload(fileName,file,{},(url)=>{
// console.log(url);
file.response = {url};
console.log(url);
let quill = this.$refs.myQuillEditor.quill;
// 获取光标所在位置
let length = quill.getSelection().index;
if(type.indexOf('image') != -1){
// 插入图片，url为服务器返回的图片链接地址
quill.insertEmbed(length, 'image', url)
}else if(type.indexOf('video') != -1){
quill.insertEmbed(length, 'video', url)
}
// 调整光标到最后
quill.setSelection(length + 1)
this.openFullScreenClose();
});
},
openFullScreen() {
let loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.loading = loading;
},
openFullScreenClose(){
if(this.loading){
this.loading.close();
}
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
alioss js文件
const OSS = require('ali-oss');
//水印
const watermark = '?x-oss-process=image/resize,w_300/watermark,image_bG9nby9sb2dvLnBuZw==,t_50,g_se,x_10,y_10';
//地址 oss-cn-shenzhen
const fileHost = 'oos region';
//签名
const bucketName = 'OOS bucket';
//id
const accessId = '阿里云OOS accessId ';
//签名
const accessKey = '阿里云OOS accessKey ';
//阿里云配置
let client = new OSS({
region: fileHost,
accessKeyId: accessId,
accessKeySecret: accessKey,
secure: true,
bucket: bucketName
})
/**
* 生成随机文件名称
* 规则八位随机字符，加下划线连接时间戳
*/
const getFileNameUUID = () => {
function rx() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
return `${+new Date()}_${rx()}${rx()}`
}
const multipartUpload = (fileName, file,config,callback)=>{
client.multipartUpload(fileName, file, config).then(results => {
// console.log(results.res.requestUrls);
if(results.res.requestUrls[0].indexOf('?') != -1){
let url = results.res.requestUrls[0].split('?')[0].replace("bucketec.oss-cn-shenzhen.aliyuncs.com","映射的域名");;
// console.log(url);
if(callback){
callback(url);
}
}else{
//console.log('图片100k以内')
let url = results.res.requestUrls[0].replace("bucketec.oss-cn-shenzhen.aliyuncs.com","映射的域名");
// console.log(url);
if(callback){
callback(url);
}
}
}).catch((err) => {
console.log(err);
});
}
export {
watermark,
client,
getFileNameUUID,
multipartUpload
}
组件引用(注意对应组件的路径)
<template>
<div>
<hello-world v-model="contentData" ></hello-world>
<el-button type="primary" @click="dataClick" >主要按钮</el-button>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
export default {
components: { HelloWorld },
data() {
return {
contentData:'',
};
},
methods: {
dataClick(){
console.log(this.contentData);
}
},
};
</script>
效果图
标签：vue,const,url,image,vue2,return,type,quill 来源： https://blog.csdn.net/laow1314/article/details/123086230