Ngx-quill: Clarification on custom button

[theCrius]

Hello, first of all, great wrapper for Quill!

I didn't touch WYSWYG editors since... a lot of time but today I had to start a project that will require one and your wrapper + quill seems the best in terms of simplicity and effectiveness.

I've a question that could seems stupid:

I need to add some buttons to the default toolbar (or add a toolbar with some custom buttons I suppose) that will do something like the create link but following a custom format.

To give some background, it's an electron app that will allow to store those files and reference them through a custom made markup language, an example would be:

• *User click on custom button*
• Popup comes up with a modal window (dedicated component) that will allow to select a specific file or add it to the app library (so the custom button don't care about what happens there)
• Once the file is selected, the modal return a payload back to Quill's custom button, let's say {type: 'media', name: 'filename.mp3'} which don't need to be parsed but just plainly displayed as @media:filename.mp3.

Out of scope:

• Once this saved text is displayed in a specific "read mode" it will be transformed in a link to a playable audio. This app act as a sort of a custom markdown editor/viewer.

---

What I am asking here are general directions on how to write custom buttons in this wrapper as I can see that Quill support custom buttons with their own custom actions/logic.

I've seen this https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/src/counter.ts but I', not sure it's the right example and, as said, I'm basically new to Quill entirely.

Just to give some more info, i'm using:

• Angular 6.0.x
• rxjs 6.1.x
• quill 1.3.x
• ngx-quill 3.6.x
• Electron 2.x

Thank you for any hint or tips :)

[KillerCodeMonkey]

sadly, i must say... i do not have that deep experiences for such a complex addon.

But maybe i can give some hints.

i would go for a combination of a custom module like the base quill image/upload module:
https://github.com/quilljs/quill/blob/develop/modules/uploader.js

there you can get an idea how some thing like that could work.
And a custom blot or format to visualize your output of that module.

You will get better help in the quilljs repo https://github.com/quilljs/quill.

[theCrius]

It's ok @KillerCodeMonkey, thank you anyway and again thanks for this wrapper :)

I think I just need to find out how a custom button write in the message, the rest is basically (meta-code):

customButtonFunction = () => {
  this.modalService.open(params).subscribe(
    res => quill.appendToText(res),
    err => this.notification.error(err)
  );
}

The actual code for quill.appendToText(res) is what I need to find out :)

[KillerCodeMonkey]

thanks for the info. feel free to close the issue if it is not longer relevant for your :)