Please how do I set up the package with VueQuill

[Nelwhix]

This is my config but I am getting this error when I select the image to resize: index.mjs:1384 Uncaught TypeError: Cannot read properties of null (reading 'includes')
at index.mjs:1384:42
at Array.some ()
at index.mjs:1382:67
at Array.filter ()
at ImageActions2.createActions (index.mjs:1381:39)
at ImageActions2.show (index.mjs:1348:12)
at HTMLDivElement. (index.mjs:870:23)

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ImageActions } from '@xeger/quill-image-actions';
import { ImageFormats } from '@xeger/quill-image-formats';

<script>
  setup: () => {
    const modules = [
      {
        name: 'imageActions',
        module: ImageActions,
      },
      {
        name: 'imageFormats',
        module: ImageFormats,
      }
    ]
    return { modules }
  }
</script>

<template>
<QuillEditor :modules="modules" v-model:content="blogHTML" contentType="html" theme="snow" toolbar="full"/>
</template>

[dawnlion0305]

I want to refer to this issue just now.
Unfortunately no one answer.
I refer the demo page.
As result, it's worked.

This my code:

<template>
  <div>
      <QuillEditor 
          id="quill" 
          theme="snow"
          @ready="setQuill"
          v-model:content="content"
          :options="editorOption" 
      />
  </div>
</template>
<script lang="ts" setup>
/**my-project/src/pages/article/editor/index.vue*/
import {Delta,Quill,QuillEditor} from '@vueup/vue-quill';
import { ImageActions } from '@xeger/quill-image-actions';
import { ImageFormats } from '@xeger/quill-image-formats';

Quill.register('modules/imageActions', ImageActions);
Quill.register('modules/imageFormats', ImageFormats);

const quill = ref<InstanceType<typeof Quill>>();
const content = ref<InstanceType<typeof Delta>>(new Delta([]));

const editorOption = {
    formats: ['align', 'background', 'blockquote', 'bold', 'code-block', 'color', 'float', 'font', 'header', 'height', 'image', 'italic', 'link', 'script', 'strike', 'size', 'underline', 'width'],
    modules:{
        imageActions: {},
        imageFormats: {},
        toolbar:{
            container:[
               'bold','italic','underline',
               {align:[]},
               {size:['small',false,'large','huge']},
               {direction:'rtl'},
               {header:1},{header:2},
               {script:'sub'},{script:'super'},
               'blockquote','code',
               {list:'ordered'},{list:'bullet'},
               {color:[]}, 
               {'header':[1,2,3,4,5,6]},
               'link',
               'image',                
            ],
        },
    },
    placeholder:'输入正文……',
    theme:'snow'
};

const setQuill = (q: Quill) => {
  quill.value = q;
}

// others code...

</script>

I hope this is helpful for you : ) @Nelwhix

[Nelwhix]

@dawnlion0305 I will try it out, thank you man👍🏾

[Nelwhix]

@dawnlion0305 Please what do these 2 lines do?. I am working on a purely JS project so I want to know how I can substitute them.

const quill = ref<InstanceType<typeof Quill>>();

const setQuill = (q: Quill) => {
  quill.value = q;
}

[dawnlion0305]

Let it alone if you code on Js project. I wanna get the instance so I can use the API of Quill in the following codes.

const quill = ref<InstanceType<typeof Quill>>();

const setQuill = (q: Quill) => {
  quill.value = q;
}

It's similar to the above on your JS project:

const quill = new Quill('#editor', {/**options*/});

I hope it's helpful for you to understand : ) @Nelwhix

[Nelwhix]

It is working perfectly now, thank you so much!!

[dawnlion0305]

I was refered to this demo. ---- Replied Message ---- | From | Nelson ***@***.***> | | Date | 9/24/2022 06:52 | | To | ***@***.***> | | Cc | ***@***.***> , ***@***.***> | | Subject | Re: [xeger/quill-image] Please how do I set up the package with VueQuill (Issue #14) | It is working perfectly now, thank you so much!!. How did you get the idea? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[xeger]

Sorry I haven't had time to chime in here; been busy with work. Thank you @dawnlion0305 for the boost!

[tedik123]

Hi I found an alternative way of using quill-image with VueQuill that to me feels a little easier to use. I'm also using quill-image-uploader in this example and everything seems to be working as expected. The main thing is that you need to explicitly define formats otherwise it won't work and I'm not sure why.

import { QuillEditor } from "@vueup/vue-quill";
import { ImageActions } from "@xeger/quill-image-actions";
import { ImageFormats } from "@xeger/quill-image-formats";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import ImageUploader from "quill-image-uploader";

const formats =['align', 'background', 'blockquote', 'bold', 'code-block', 'color', 'float', 'font', 'header',
  'height', 'image', 'italic', 'link', 'script', 'strike', 'size', 'underline', 'width', 'video']
const modules = [
  {
    name: "imageFormats",
    module: ImageFormats,
  },
  {
    name: "imageActions",
    module: ImageActions,
  },
  {
    name: "imageUploader",
    module: ImageUploader,
    options: {
      upload: imageHandler,
    },
  },
];
// keep what you want but you need the formats option!
const options = {
  debug: "info",
  placeholder: "Compose an epic...",
  readOnly: false,
  theme: "snow",
  formats: formats,
};

Vue Component
<QuillEditor :options="options" :modules="modules" toolbar="full" v-model:content="content" content-type="html" />

[xeger]

It's a standard Quill behavior (and a best practice) to explicitly define all of the formats you want your editor to support. There is a selection of default formats, but quill-image-actions relies on some new formats I have added (width, height, float) to do its job, so, these must be added to the options of every editor that you instantiate, along with the modules themselves.

I'm reopening this issue so it's easier for people to find; thank you for providing a working example @tedik123.

At some point I will try to incorporate your info into the README, and/or craete separate readmes for react vs. vue vs. pure-JS Quill.

[tedik123]

No problem! Thank you for the explanation and your work on this project!

[anburocky3]

@xeger Why do we have this warning in console.log?

[xeger]

That warning indicates that Quill.register is being called more than once.

Quill.register is a one-time operation that adds the module to a global/static list of modules that Quill knows about. It should be called at app startup.

In contrast, every time an instance of Quill is constructed, there are modules and formats options that define which registered modules/formats should be active in that specific instance.

I don't know anything about Vue but my guess is that your calls to Quillregister are inside a render method or some other context that gets executed many times. Hoist them up to your startup code.

[anburocky3]

Should I call this on app.vue or in the component itself?

In the component itself only, when refreshing, the problem exist. On fresh restart, the error is not displaying.

[xeger]

Try calling register in the initialisation code of app.vue, or maybe even main.js - I'm not sure which is more appropriate as I have never worked with Vue before.

For an example, see the registration code in the sandbox. Notice how it is called exactly once, at page load. That is what you want to achieve. Calling register on each render will cause a warning message on render #2, #3, #4, etc.