Editor: Lack of Documentation or Missing Functionality for Configuring and Extending Quill in PrimeVue Editor

[sparrow-chik-chrk]

Describe the bug

The current PrimeVue Editor component does not appear to provide a way to configure or extend the Quill instance before it is initialized. This issue can be reproduced by attempting to register custom formats, fonts, or Blots as required for advanced text editing use cases.

For example:

let Font = Quill.import('formats/font');
Font.whitelist = ['inconsolata', 'roboto', 'mirza', 'arial'];
Quill.register(Font, true);

Attempting this with the current Editor component is not possible because it does not expose an interface or hook to register such configurations prior to instantiating the Quill instance.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-rmwvyd2n?file=src%2Fmain.js

Environment

Windows 10

Vue version

latest

PrimeVue version

4.2.5

Node version

22.12.0

Browser(s)

Chrome 90

Steps to reproduce the behavior

1. Install PrimeVue Editor and attempt to customize Quill using custom formats or Blots.
2. Observe that there is no documented way to inject or configure these features before the Editor initializes Quill.
3. This results in an inability to use PrimeVue Editor for advanced configurations of Quill.

Expected behavior

The Editor component should provide a way to:

Register custom Quill formats or Blots.
Configure Quill instance settings (e.g., Font.whitelist) before initializing the instance.

[github-actions]

Due to PrimeTek's demanding roadmap for PrimeVue and the limited bandwidth of the core team, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨

[J-Michalek]

From looking at this problem it seems to me like a lack of documentation.

@sparrow-chik-chrk The Editor component emits a load event with the instance being present in the payload, then you can use it however you need.

<Editor @load="onEditorLoaded" />

<script>
function onEditorLoaded({ instance }) {
...
}
</script>

I will add it to the docs.

Edit: It actually is in the docs I just overlooked it https://primevue.org/editor/#api.editor.emits, let me know if this helps with your problem.

[sparrow-chik-chrk]

@J-Michalek Correct me if I'm wrong – doesn't @load emit only after an instance is created?

[J-Michalek]

@sparrow-chik-chrk Excuse me, that sounds about right, I'll educate myself more about how the Quill editor works and get back to you.

[J-Michalek]

@sparrow-chik-chrk From what I can tell you don't actually need access to the editor instance that is created within the Editor component, you just have to register the changes on the Quill class using the static register method.

You should be able to do something like the following:

<template>
  <Editor />
</template>

<script setup>
import Quill from "quill"
import { Editor } from "primevue"
import { onBeforeMount } from "vue"

onBeforeMount(() => {
  const Font = Quill.import('formats/font');
  Font.whitelist = ['inconsolata', 'roboto', 'mirza', 'arial'];
  Quill.register(Font, true);
})
</script>

The instance that is created within the Editor component should then be created with the updated settings.

I guess we could add some property i.e. beforeEditorInit which would accept a callback that would provide the Quill class as a parameter and it would be invoked before the editor instance is created, but I am not sure if it is necessary.

Edit: Though I agree that this should be documented in some way and ideally event shown within the examples.