Current filter:
                                You should refresh the page.
                                  • Currently, I could not find a way to register certain types of embedded quill components. For instance, to add a simple 'HR' tag you must import 'blots/block/embed' but I could not find this built into the HTML Editor Control.

                                    for instance, now I must import the quill-react library to get Quill:

                                    [JavaScript]
                                    import { Quill } from 'react-quill';
                                    [JavaScript]
                                    const BlockEmbed = Quill.import('blots/block/embed'); class DividerBlot extends BlockEmbed { blotName='divider' tagName='hr' }

                                    and then in componentDidMount (for react, otherwise however you get the HTML Editor instance)

                                    [JavaScript]
                                    componentDidMount=()=>{ this.dxHtmlEditor.register(DividerBlot); }

                                    I think it would be best not to have to rely on the Quill external library outside of the component, as I assume you are already using the library, preferred method would be adding the 'import' method to the HTML Editor instance:

                                    [JavaScript]
                                    componentDidMount=()=>{ const BlockEmbed = this.dxHtmlEditor.import('blots/block/embed'); class DividerBlot extends BlockEmbed { blotName='divider' tagName='hr' } this.dxHtmlEditor.register(DividerBlot); }

                                    Please let me know if there is a better way, or if this approach will be considered.

                                    Thanks

                                1 Solution

                                Creation Date Importance Sort by

                                Hi,

                                You can get base Quill blots, formats, or Parchment by using the get method.
                                I've prepared a code snippet to demonstrate this technique:

                                [JavaScript]
                                componentDidMount() { const Parchment = this.dxHtmlEditor.get('parchment'); // you can get Quill "Embed" blot by ".get('blots/embed')" const Embed = Parchment.Embed; // base "Embed" blot without any content class DividerBlot extends Embed {} DividerBlot.blotName='divider'; DividerBlot.tagName='hr'; this.dxHtmlEditor.register(DividerBlot); }
                                • Timothy Walton 08.14.2019

                                  I see, thanks!