Confusion with insertHTML method

[madikarizma]

In the documentation, it states you can insert HTML into the editor document:

Inserting HTML

To insert HTML into the document, call the editor.insertHTML method. Trix will first convert the HTML into its internal document model. During this conversion, any formatting that cannot be represented in a Trix document will be lost.

// Insert a bold “Hello” at the beginning of the document
element.editor.setSelectedRange([0, 0])
element.editor.insertHTML("<strong>Hello</strong>")

...though it does not seem to work except for inserting formatting, such as <b>test</b>, which is already handled by the toolbar.

1. Is is possible to enter custom elements? For example, my intention is to add a listener that uses the inserHTML method to embed video. Trix seems to strip all HTML instead and only insert any text between the tags. When attempting to insert only a <div> tag, it inserts nothing.
2. Also, it appears the example in the documentation doesn't actually work, either. The tag is stripped and "Hello" is all that gets inserted. However, <b> works as an alternative.

During this conversion, any formatting that cannot be represented in a Trix document will be lost.

This may be the reason, but it's not clear and can waste a bit of time. If there's a list of accepted tags and attributes, perhaps it would be valuable to add this info to the README.

Or maybe I'm misunderstanding something?

[javan]

Also, it appears the example in the documentation doesn't actually work, either. The tag is stripped and "Hello" is all that gets inserted. However, <b> works as an alternative.

Do you have CSS in your app that styles <strong> as something other than bold? Trix's HTML parser considers elements with a font weight >= 700 as bold.

It's working as expected on http://trix-editor.org/

If there's a list of accepted tags and attributes, perhaps it would be valuable to add this info to the README.

There's no list of accepted tags because we use computed styles to determine the corresponding attributes. The attributes are those that you see on the toolbar.

Is is possible to enter custom elements? For example, my intention is to add a listener that uses the inserHTML method to embed video.

You could do this what we call content attachments, which aren't documented yet.

embed = '<iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>'
attachment = new Trix.Attachment({content: embed})
element.editor.insertAttachment(attachment)

[madikarizma]

@javan Thank you for your feedback here and especially within such short time. Perhaps I haven't been able to dig deep enough to understand Trix completely, which is leading to some of my confusion.

Your thoughts are spot on. I do have <strong> styled with a slightly lighter weight. And the attachment API example is exactly what I thought was possible, but didn't yet know how to implement.

I really appreciate this—thank you again. Trix is an exciting project.

[javan]

🍻

[madikarizma]

Hi, @javan. I am struggling with one more thing.

I used your example above successfully to add custom attachments in my editor. Specifically, I am enabling video embedding, but I want to provide the "remove" option at all times (not just when selected). Is this possible? I attempted to insert a custom removal button into the attachment HTML (while permanently hiding the default button), but I am confused on how to appropriately add a click event listener to the option that persists whenever the editor state changes.

Thanks again for any help you may be able to provide here.

[madikarizma]

Also, I want to bring to you attention this issue I noticed when inserting iframe/video attachments. When cursor is above the attachment and you hit enter, sometimes it loses focus completely. It appears to happen most when hitting enter from a line of text—less when from an empty line.

You will see the cursor disappear here a few times. Other times the cursor is still there, in which case it's working fine despite the video taking a few seconds to reload.