KillerCodeMonkey / ngx-quill

Angular (>=2) components for the Quill Rich Text Editor
MIT License
1.77k stars 258 forks source link

Embedding custom components doesnt render the child nodes #1539

Closed visualbuffer closed 2 years ago

visualbuffer commented 2 years ago

Hi Bengt,

First of all thanks for writing the wrapper around quill makes integrating a breeze. I was trying to embed a custom component into the quill editor, it does include the selector however the child nodes (of the custom component) are not rendered. Same in the quill view as well.

Editor component

`class CustomComponentModule extends blockEmbed {} CustomComponentModule.blotName = 'image'; CustomComponentModule.tagName = 'content-figure';

Quill.register(CustomComponentModule);`

Selector Tag:

@Component({ selector: 'content-figure', template: '<h1>Do you see this?<h1>', styleUrls: [], })

Rendered html in Quill editor on clicking image: `

    <p><br></p>
</div>`
KillerCodeMonkey commented 2 years ago

eehm you are using native quilljs and not ngx-quill.

and there is nothing like using angular components in there. quilljs is written in javascript and only allow to set known formats and tags. It will not interpret angular components or code... it "lives" outside of the angular context.

So just ask this at quilljs repo, if you are not using ngx-quill.

visualbuffer commented 2 years ago

Thanks for the quick response ! Will post on quilljs. Is there anything in the ngx-quill api which might help ?

visualbuffer commented 2 years ago

Leaving a link to the quill issue: https://github.com/quilljs/quill/issues/3587

JoanCodinachUoc commented 1 month ago

@KillerCodeMonkey @visualbuffer But this problem in ngx-quill is solved ? If the answer is yes, can you show us an example please?

Thank you

KillerCodeMonkey commented 1 month ago

there was never a problem in ngx-quill.

native quilljs is rendering the content of the editor... since it does not know anything about angular or angular components this never will work out of the box.

just follow the linked quills issue.

  1. make sure you generate your angular component as ordinary web component
  2. register it to quilljs
JoanCodinachUoc commented 1 month ago

@KillerCodeMonkey I know there was never a problem in ngx-quill.

I want to know if with ngx-quill i can use angular components or also have to generate angular components as web components and register it ?

visualbuffer commented 1 month ago

You absolutely can

KillerCodeMonkey commented 1 month ago

yes but then you need to generate your components as native web components (buzzword: angular elements) and register it that quilljs recognizes it. just follow the already posted quilljs issue https://github.com/slab/quill/issues/3587