Feature: How to add 'Show HTML' button

[frobert]

Hi, forst of all, great plugin. Is there any way to add 'show HTML' button to editor, so users can se HTML source code when writing texs?

Thanks

[blocknotes]

Hi @frobert I made some searches but I think that QuillJS doesn't provide a "Show HTML" / "Show source" feature unfortunately. Perhaps the best solution would be to create a custom editor module.

BTW, I'll think about it to see if there could be some workaround.

[frobert]

@blocknotes Yeah, that is weird, usually all HTML editors have thew 'Show source' option...

Yeas there are some custom modules, but is difficult to inject them into activeadmin_quill_editor gem just like that. It would be great if you could implement this feature to the gem so it works out of the box.

Thanks.

[TheBrockEllis]

I know this is an older issue, but I wanted to share how I was able to accomplish this.

I used this quill-html-edit-button plugin.

In the javascript used to import the activeadmin_quill_editorlibrary, I also import and then register the htmlEditButton plugin.

import 'activeadmin_quill_editor'
import htmlEditButton from "quill-html-edit-button";
Quill.register("modules/htmlEditButton", htmlEditButton);

And then in the active admin form, I specify the quill editor type and use the data-* options to specify the modules.

f.input :content, as: :quill_editor, input_html: { data: { options: { modules: { htmlEditButton: {} } } } }

That adds the "Edit HTML" button at the end of my toolbar. I had to do some CSS tweaking to get it to display properly (it doesn't have SVG icons like the stock Quill editor icons, so it was inheriting some other styles that were undesirable.)

[blocknotes]

Thank you for your feedback @TheBrockEllis!

I didn't have chance to make experiments on this side but it looks like a nice solution.

Closing the issue for now.