diff --git a/docs/content/api/methods.md b/docs/content/api/methods.md index 94ceec5f..18b97e1b 100644 --- a/docs/content/api/methods.md +++ b/docs/content/api/methods.md @@ -1,5 +1,21 @@ # Methods +::: warning +We highly recommend to call method when the quill editor ready, use @ready event +::: + +## getEditor() + +- **Return:** `editor: Element` + + Returns the Editor Element. + +## getToolbar() + +- **Return:** `toolbar: Element` + + Returns the Toolbar Element. + ## getQuill() - **Return:** `quill: Quill` diff --git a/src/components/QuillEditor.ts b/src/components/QuillEditor.ts index a0d386de..dc06ef34 100644 --- a/src/components/QuillEditor.ts +++ b/src/components/QuillEditor.ts @@ -110,7 +110,7 @@ export default defineComponent({ if (props.theme !== "bubble") editor.value.classList.remove("ql-bubble"); if (props.theme !== "snow") editor.value.classList.remove("ql-snow"); // Fix clicking the quill toolbar is detected as blur event - quill.getModule("toolbar")?.container.addEventListener("mousedown", (e) => { + quill.getModule("toolbar")?.container.addEventListener("mousedown", (e: MouseEvent) => { e.preventDefault(); }); // Emit ready event @@ -191,6 +191,14 @@ export default defineComponent({ } }; + const getEditor = (): Element => { + return editor.value as Element + } + + const getToolbar = (): Element => { + return quill?.getModule("toolbar")?.container + } + const getQuill = (): Quill => { if (quill) return quill else throw `The quill editor hasn't been instantiated yet, @@ -206,6 +214,12 @@ export default defineComponent({ quill?.clipboard.dangerouslyPasteHTML(html) } + const reinit = () => { + if (!ctx.slots.toolbar && quill) + quill.getModule("toolbar")?.container.remove(); + initialize(); + } + watch( () => props.content, (newContent, oldContent) => { @@ -222,19 +236,6 @@ export default defineComponent({ } ); - watch( - [ - () => props.options, - () => props.theme, - () => props.toolbar - ], - () => { - if (!ctx.slots.toolbar && quill) - quill.getModule("toolbar")?.container.remove(); - initialize(); - } - ); - watch( () => props.enable, (newValue, oldValue) => { @@ -244,9 +245,12 @@ export default defineComponent({ return { editor, + getEditor, + getToolbar, getQuill, getHTML, setHTML, + reinit, }; }, inheritAttrs: false, diff --git a/src/main.ts b/src/main.ts index f1893524..d8b6f8c9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,7 +5,7 @@ */ import QuillEditor from "./components/QuillEditor" -import Quill from "quill" +import Quill from "quill/core" export { QuillEditor as default,