Merge pull request #3 from vueup/alpha

Alpha

Author: luthfimasruri

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`

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,

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,