Multi tool use

Clash Royale CLAN TAG

How to escape existing content of a div with Quill?

I don't use ngQuill or anything like that.

I can instanciate a quill editor with this code

ctrl.containerElement = $element[0].querySelector('.js-textarea');
ctrl.editor = new Quill(ctrl.containerElement, {
theme: 'bubble',
modules: {
toolbar: toolbarOptions
}
});

And I registered a custom blot to allow my users to put uiTag (a custom component) inside this editor. It works well.

But if my container element contains uiTag before the instanciation, it throw an error :

<div class="c-ui-content-editable__textarea js-textarea">
<b>Hi chicken</b>oijzdiojzoijzd
<p>
<ui-tag color="'secondary'">
<s-label>firstName lastName</s-label>
</ui-tag>
</p>
</div>

The error is TypeError: Cannot read property 'childNodes' of undefined

TypeError: Cannot read property 'childNodes' of undefined

Obviously, if I remove the uiTag, the existing content it properly parsed by Quill.

Do you have any idea to parse existing content ?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.