使用富文本插件 vue-quill-editor
步骤:1.下载插件
npm install vue-quill-editor --save
2.全局引入,也可以局部引入
import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor)
3.全部代码
<template> <div> <el-form> <el-form-item> <el-upload v-show="false" class="avatar-uploader" :action="upload_qiniu_url" :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleError" :before-upload="beforeAvatarUpload" :data="qiniuData" :file-list="fileList" list-type="picture" > </el-upload> </el-form-item> </el-form> <quill-editor v-model="desc" ref="myTextEditor" class="editer" :options="editorOption" @blur="onEditorBlur($event)" @ready="onEditorReady($event)" @change="onEditorChange($event)" ></quill-editor> </div> </template> <script> import { quillEditor } from "vue-quill-editor"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; 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] }], [{ font: [] }], [{ color: [] }, { background: [] }], [{ align: [] }], ["clean"], ["link", "image", "video"] ]; export default { name: "quilleditor", data() { return { qiniuData: { key: "", token: "" }, // 七牛云上传储存区域的上传域名(华东、华北、华南、北美、东南亚) upload_qiniu_url: "http://upload-z2.qiniup.com", // 七牛云返回储存图片的子域名 upload_qiniu_addr: "http://七牛云配置域名.com/", imageUrl: "", qiniuToken: "", fileList: [], desc: "", editorOption: { modules: { toolbar: { container: toolbarOptions, // 工具栏 handlers: { image: function(value) { console.log("value ", value); if (value) { document.querySelector(".avatar-uploader input").click(); } else { this.quill.format("image", false); } } } }, syntax: { highlight: text => hljs.highlightAuto(text).value } } }, qiniuData: { token: "" }, qiniuToken: "", url: "", imageUrl: "", quillUpdateImg: false }; }, mounted() { this.getQiniuToken(); }, components: { quillEditor }, methods: {
//获取七牛云token getQiniuToken() { this.$http.get("/qiNiu/manage").then(({ data: res }) => { console.log(res); this.qiniuToken = res.token; this.qiniuData.token = res.token; }); }, onEditorChange(editor) { // console.log("editor focus!", editor); }, onEditorBlur(editor) { console.log("editor blur!", editor); }, onEditorReady(editor) { console.log("editor ready!", editor); }, beforeUpload() { // 显示loading动画 this.getQiniuToken(); this.quillUpdateImg = true; }, uploadError() { // loading动画消失 this.quillUpdateImg = false; this.$message.error("图片插入失败"); },
//富文本插入网络图片
onLinkImageUrl() {
var imageurl = document.querySelector(".url-image-fuzhu input").value;
let quill = this.$refs.myTextEditor.quill;
let length = quill.getSelection().index;
quill.insertEmbed(length, "image", imageurl);
quill.setSelection(length + 1);
},
beforeAvatarUpload: function(file) { this.qiniuData.key = file.name; const isJPG = file.type === "image/jpeg"; const isPNG = file.type === "image/png"; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG && !isPNG) { this.$message.error("图片只能是 JPG/PNG 格式!"); return false; } if (!isLt2M) { this.$message.error("图片大小不能超过 2MB!"); return false; } }, handleAvatarSuccess: function(res, file) { console.log(res); this.imageUrl = this.upload_qiniu_addr + res.key; let data = this.imageUrl; let quill = this.$refs.myTextEditor.quill; // 如果上传成功 // 获取光标所在位置 let length = quill.getSelection().index; // 插入图片 res.info为服务器返回的图片地址 quill.insertEmbed(length, "image", data); // 调整光标到最后 quill.setSelection(length + 1); // this.$message.error('图片插入失败') // loading动画消失 this.quillUpdateImg = false; console.log(this.imageUrl); }, handleError: function(res) { this.$message({ message: "上传失败", duration: 2000, type: "warning" }); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); } } }; </script>