Trumbowyg: Adding custom read-only block

Created on 28 Jul 2016  ·  7Comments  ·  Source: Alex-D/Trumbowyg

Hi, I am trying to make custom button that inserts custom tag with content (in my case <article_id>Article ID Placeholder</article_id>). Everything is ok when you press the button, the html is appending to the editor, but after that there are problems that I can't solve:
When you start typing the text is within my custom tag and I can't get out of it. When you press the tag is multiplying on the next row.

My question is: Is there a way to insert html content as some kind of block that you can't edit (read-only) and the cursor can't get inside of it?

question

Most helpful comment

I have solved my issue. I am sharing my workaround. You can add disabled input element and it completely act the way I want it to be (as a custom block). Then you can style it the way you want with css. Here is a little snippet of the code:
trumbowyg.execCmd('insertHTML', '<input name="pagebreak" value="My custom block" class="custom_block" type="text" disabled="disabled"/>');

All 7 comments

Nope :/
I don't deal that in Trumbowyg.

When you add a link and continue typing you are not in the "a" tag, so you've got to do this somehow. I am looking in the core code for an hours but can't figure out how you do that.

When you add a link and continue typing you are not in the "a" tag

Yep, it's a bug... due to semantic option I think.

I have solved my issue. I am sharing my workaround. You can add disabled input element and it completely act the way I want it to be (as a custom block). Then you can style it the way you want with css. Here is a little snippet of the code:
trumbowyg.execCmd('insertHTML', '<input name="pagebreak" value="My custom block" class="custom_block" type="text" disabled="disabled"/>');

note: insertHTML does not work on any browsers :/

Tables worked for me too <table contentEditable="false" disabled="disabled">

I have solved my issue. I am sharing my workaround. You can add disabled input element and it completely act the way I want it to be (as a custom block). Then you can style it the way you want with css. Here is a little snippet of the code:
trumbowyg.execCmd('insertHTML', '<input name="pagebreak" value="My custom block" class="custom_block" type="text" disabled="disabled"/>');

You've saved my life.

Was this page helpful?
0 / 5 - 0 ratings