From 85998968b40801b38ab4c0b8fbdbf0f87d0f13f2 Mon Sep 17 00:00:00 2001
From: Nelson Isioma <58360242+Nelwhix@users.noreply.github.com>
Date: Sat, 10 Sep 2022 01:41:39 +0100
Subject: [PATCH] Updated Modules docs

I really like your package but I had tough time configuring quill-image-uploader. This change is for people like me who get stuck in the future configuring the module.
---
 docs/content/guide/modules.md | 52 +++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/docs/content/guide/modules.md b/docs/content/guide/modules.md
index 2214fcf6..e6734e9b 100644
--- a/docs/content/guide/modules.md
+++ b/docs/content/guide/modules.md
@@ -41,6 +41,58 @@ export default defineComponent({
 })
 </script>
 ~~~
+## Example using quill-image-uploader
+In this example I am gonna use [quill-image-uploader](https://github.com/NoelOConnell/quill-image-uploader), A module for Quill rich text editor to allow images to be uploaded to a server instead of being base64 encoded.
+
+
+**Installation:**
+``` bash
+npm install quill-image-uploader --save
+```
+**Usage:**
+
+~~~ vue
+<template>
+  <QuillEditor :modules="modules" toolbar="full" />
+</template>
+
+<script>
+import { ref, defineComponent } from 'vue'
+import { QuillEditor } from '@vueup/vue-quill'
+import '@vueup/vue-quill/dist/vue-quill.snow.css'
+import ImageUploader from 'quill-image-uploader';
+import axios from '../lib/axios';
+
+export default defineComponent({
+  components: {
+    QuillEditor,
+  },
+  setup: () => {
+    const modules = {
+        name: 'imageUploader',
+        module: ImageUploader,
+        options: {
+          upload: file => {
+            return new Promise((resolve, reject) => {
+              const formData = new FormData();
+              formData.append("image", file);
+
+              axios.post('/upload-image', formData)
+              .then(res => {
+                console.log(res)
+                resolve(res.data.url);
+              })
+              .catch(err => {
+                reject("Upload failed");
+                console.error("Error:", err)
+              })
+            })
+          }
+    return { modules }
+  }
+})
+</script>
+~~~
 
 See [Quill modules docs](https://quilljs.com/docs/modules/) for more details.