<template> <div :class="pointer ? 'none-pointer' : ''"> <el-upload :action="uploadUrl" :on-success="handleUploadSuccess" :on-error="handleUploadError" name="file" :show-file-list="false" :headers="headers" style="display: none" ref="upload" v-if="this.uploadUrl" > </el-upload> <div class="editor" ref="editor" :style="styles"></div> </div> </template>
<script> import Quill from "quill"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; import {<!-- --> getToken } from "@/utils/auth"; import request from "@/utils/request"; export default {<!-- --> name: "Editor", props: {<!-- --> /* Editor content */ value: {<!-- --> type: String, default: "", }, /* high */ height: {<!-- --> type: Number, default: null, }, /* Minimum height */ minHeight: {<!-- --> type: Number, default: null, }, /* read only */ readOnly: {<!-- --> type: Boolean, default: false, }, /* Upload address */ uploadUrl: {<!-- --> type: String, // default: "", default: process.env.VUE_APP_BASE_API + "/common/upload", }, // read-only mode pointer: {<!-- --> type: Boolean, default: false, }, }, data() {<!-- --> return {<!-- --> headers: {<!-- --> Authorization: "Bearer " + getToken(), }, Quill: null, currentValue: "", options: {<!-- --> theme: "snow", bounds: document.body, debug: "warn", modules: {<!-- --> // Toolbar configuration toolbar: [ ["bold", "italic", "underline", "strike"], // bold italic underline strikethrough ["blockquote", "code-block"], // quote code block [{<!-- --> list: "ordered" }, {<!-- --> list: "bullet" }], // Ordered and unordered lists [{<!-- --> indent: "-1" }, {<!-- --> indent: " + 1" }], // Indent [{<!-- --> size: ["small", false, "large", "huge"] }], // font size [{<!-- --> header: [1, 2, 3, 4, 5, 6, false] }], // header [{<!-- --> color: [] }, {<!-- --> background: [] }], // font color, font background color [{<!-- --> align: [] }], // Alignment ["clean"], // Clear text format ["link", "image", "video"], // Links, pictures, videos ], }, placeholder: "Please enter content", readOnly: this.readOnly, }, }; }, computed: {<!-- --> styles() {<!-- --> let style = {<!-- -->}; if (this.minHeight) {<!-- --> style.minHeight = `${<!-- -->this.minHeight}px`; } if (this.height) {<!-- --> style.height = `${<!-- -->this.height}px`; } return style; }, }, watch: {<!-- --> value: {<!-- --> handler(val) {<!-- --> console.log(val, "value watch", this.Quill); if (val !== this.currentValue) {<!-- --> this.currentValue = val === null ? "" : val; if (this.Quill) {<!-- --> this.Quill.pasteHTML(this.currentValue); } } }, immediate: true, }, }, mounted() {<!-- --> this.init(); }, beforeDestroy() {<!-- --> this.Quill = null; }, methods: {<!-- --> change() {<!-- --> let quill = this.Quill; quill.root.addEventListener( "paste", (evt) => {<!-- --> if ( evt.clipboardData & amp; & amp; evt.clipboardData.files & amp; & amp; 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; } const formData = new FormData(); formData.append("file", file); request({<!-- --> url: this.uploadUrl, method: "post", data: formData, }).then((res) => {<!-- --> console.log(res); if (res.code == 200) {<!-- --> let length = quill.getSelection().index; //Cursor position //Insert image address quill.insertEmbed(length, "image", res.url); //Move the cursor back one position quill.setSelection(length + 1); } else {<!-- --> this.$message({<!-- --> message: res.msg, type: "warning", }); } }); }); } }, false ); }, init() {<!-- --> const editor = this.$refs.editor; this.Quill = new Quill(editor, this.options); // If the upload address is set, customize the image upload event if (this.uploadUrl) {<!-- --> this.change(); let toolbar = this.Quill.getModule("toolbar"); toolbar.addHandler("image", (value) => {<!-- --> this.uploadType = "image"; if (value) {<!-- --> this.$refs.upload.$children[0].$refs.input.click(); } else {<!-- --> this.quill.format("image", false); } }); toolbar.addHandler("video", (value) => {<!-- --> this.uploadType = "video"; if (value) {<!-- --> this.$refs.upload.$children[0].$refs.input.click(); } else {<!-- --> this.quill.format("video", false); } }); } this.Quill.pasteHTML(this.currentValue); this.Quill.on("text-change", (delta, oldDelta, source) => {<!-- --> const html = this.$refs.editor.children[0].innerHTML; const text = this.Quill.getText(); const quill = this.Quill; this.currentValue = html; this.$emit("input", html); this.$emit("on-change", {<!-- --> html, text, quill }); }); this.Quill.on("text-change", (delta, oldDelta, source) => {<!-- --> this.$emit("on-text-change", delta, oldDelta, source); }); this.Quill.on("selection-change", (range, oldRange, source) => {<!-- --> this.$emit("on-selection-change", range, oldRange, source); }); this.Quill.on("editor-change", (eventName, ...args) => {<!-- --> this.$emit("on-editor-change", eventName, ...args); }); }, handleUploadSuccess(res, file) {<!-- --> console.info(res, file, "aaaaaaaa"); // Get rich text component instance let quill = this.Quill; // If the upload is successful if (res.code == 200) {<!-- --> // Get the cursor position let length = quill.getSelection().index; //Insert image res.url is the image address returned by the server quill.insertEmbed(length, "image", res.url); //Adjust the cursor to the end quill.setSelection(length + 1); } else {<!-- --> this.$message.error("Picture insertion failed"); } }, handleUploadError() {<!-- --> this.$message.error("Picture insertion failed"); }, }, }; </script>
<style> .editor, .ql-toolbar {<!-- --> white-space: pre-wrap !important; line-height: normal !important; } .quill-img {<!-- --> display: none; } .ql-snow .ql-tooltip[data-mode="link"]::before {<!-- --> content: "Please enter the link address:"; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after {<!-- --> border-right: 0px; content: "save"; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode="video"]::before {<!-- --> content: "Please enter the video address:"; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {<!-- --> content: "14px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {<!-- --> content: "10px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {<!-- --> content: "18px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {<!-- --> content: "32px"; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {<!-- --> content: "text"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {<!-- --> content: "Title 1"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {<!-- --> content: "Title 2"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {<!-- --> content: "Title 3"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {<!-- --> content: "Title 4"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {<!-- --> content: "Title 5"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {<!-- --> content: "Title 6"; } .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before {<!-- --> content: "standard font"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {<!-- --> content: "serif font"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {<!-- --> content: "monospaced font"; } .none-pointer {<!-- --> pointer-events: none; } </style>