<template> <div class="vab-quill" :class="classes"> <div 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"; export default { name: "VabQuill", props: { value: { type: String, default: "", }, border: { type: Boolean, default: false, }, height: { type: Number, default: null, }, minHeight: { type: Number, default: null, }, }, data() { return { Quill: null, currentValue: "", options: { theme: "snow", bounds: document.body, debug: "warn", modules: { toolbar: [ ["bold", "italic", "underline", "strike"], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ size: ["small", false, "large", "huge"] }], [{ color: [] }, { background: [] }], ["blockquote", "code-block"], [{ list: "ordered" }, { list: "bullet" }], [{ indent: "-1" }, { indent: "+1" }], [{ align: [] }], [{ direction: "rtl" }], ["clean"], ["link", "image"], ], }, placeholder: "内容...", readOnly: false, }, }; }, computed: { classes() { return [ { "vab-quill-no-border": !this.border, }, ]; }, 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) { if (val !== this.currentValue) { this.currentValue = val; if (this.Quill) { this.Quill.pasteHTML(this.value); } } }, immediate: true, }, }, mounted() { this.init(); }, beforeDestroy() { this.Quill = null; }, methods: { init() { const editor = this.$refs.editor; this.Quill = new Quill(editor, this.options); 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); }); }, }, }; </script>