How can I define a layout for Quill content?

Question

How can you make an editor within editor with Quill? Imagine a scenario: there is some text with formating, then there is an embed (image/video/...) with some formated text on the right. And then there is some text again. So HTML would look like:

<editor>
<regular_quill_stuff></regular_quill_stuff>
<customEmbed> // some CSS flex here
    <container contenteditable="false"><image></image></container>
    <container><regular_quill_stuff_in></regular_quill_stuff_in></container>
</customEmbed>
<regular_quill_stuff></regular_quill_stuff>
</editor>

NOTES:

• in 'regular_quill_stuff_in' user should be able too use the same toolbar but inserting embeds should be disabled.
• when you remove embed blot from outside, 'regular_quill_stuff_in' contents should be moved to 'regular_quill_stuff'.

I've tried making some custom blot based on Block, Code and Scroll but I can't really understand how to make it work, and many low level stuff isn't documented very well. Then I tried to create another instance of Quill on a dom node, but it was very buggy becouse main quill was reciving events from within . I was able to fix it with auto-enabling/disabling Quills based on user focusing divs, but it still was buggy, not to mention passing information between two Quills and edit history and deltas were very incoistent.

Surely there has to be a way to make it easier.

Answer 1

Styling and organizing HTML elements on a page is done using CSS stylesheets. Basically, elements get values for their class and id attributes, so that they can be selected to have a desired stylization applied.

This same process is done with any WYSIWYG rich text editor. The buttons on the editor toolbar are responsible for not only adding new content, but also changing what is already present. For some, this involves changing or applying classes to the desired snippet.

We can see this happening in Quill using the alignment format. If you write the following line in Quill:

This is a simple test.

As a result, you will have the following HTML markup in the editor:

<p>This is a simple test.</p>

Selecting a portion of this text and using/applying the alignment format to, for example, center, will cause a class to be applied to the paragraph, and the result will be as follows:

<p class="ql-align-center">This is a simple test.</p>

So what does this mean? This means you can define your own formats to apply classes that are in charge of arranging the layout of Quill content the way you want.

Compared to what you said, the idea is not to add the content to a container, but to add a CSS class capable of organizing the content.

You can choose to apply attributors, or define new elements for it. But this kind of process requires testing and more testing. I'm not sure how you want to organize things, or what features you want to add. Therefore, for this to be implemented correctly, you will need to test formats and styles for the different HTML elements present as the editor content.

I suggest you start with simple things, such as text, a paragraph. Try to create an attributor that can apply classes to paragraphs. When you can do that, try something else, such as images, videos, the embed elements. You will find varied results, and this will show that you have to test and test until the desired result is found.

As a help, copy the alignment code, but change it to a desired class. More information on this can be found at the following links:

• Creating a custom class attributer in QuillJS
• Using Quill.js To Build A WYSIWYG Editor For Your Website
• Example for custom class attributor

To learn how to define new formats through blots, see the following links:

• Quill-Examples-and-FAQ
• Quill GitHub - Parchment
• Cloning Medium with Parchment