quill - Best way to add "style editor" to QuillJS? - Stack Overflow

admin管理员组

文章数量:1122846

I am currently trying to implement QuillJS as a WYSIWYG editor for HTML. Works well for many options. But, in order to keep my site "clean", I'd love to be able to present a "Styles" dropdown, a bit like what you would have in Word or LibreOffice Writer :

Of course, to make things more interesting, I need to be able to customize the styles. Creating the dropdown is easy, applying styles a bit less, but I managed. The question I have now, is would it be better to create Blots for each style, or a combination of existing Blots and Attributors? With a bit of an example, imagine I want to be able to apply the following styles :

<h1 />
<h1 class="altTitle />
<h2 />
<span style="color:red;" />
<span style="color:green;" />

Right now, I have been using Blots, but I face some issues:

• Inline Blots don't replace one another but stack. (If I apply the red style twice, I get two identical nested spans.)
• If I load HTML into my QuillJS, it doesn't recognize Blots correctly. If I have a <h1 />, if I look into the structure of my Parchment content, its Blot is <h1 class="altTitle">. It displays fine (it does not have the class), but if I want to update the styles dropdown with the style where the cursor is, Quill gives me the wrong one.

So I'm thinking, maybe using the default Blots (Header, List, Link and so on) and using Attributor to add class/styles (like the default color picker seems to be doing) might be better. Any advice from people more versed with Quill than I am?

Additional information: I will need to work with both classes and inline styles: Sometimes, the result will be used to send emails, and classes are touchy in an email. Also, I can't store the Parchment structure in my DB: I'm replacing an older tech, so I have to be able to load HTML into my Quill.

本文标签： quillBest way to add quotstyle editorquot to QuillJSStack Overflow