"block" part of HTML in wysiHTML5

Question

I use https://github.com/xing/wysihtml5 for the editor in my code base, and I would like to “block” parts of the code so that it cannot be edited, for example:

<form> <textarea id="wysihtml5-textarea" placeholder="Enter your text ..." autofocus> <div>Some Editable Text here :) </div> <div class="lockedForEditing" contenteditable="false">YOU CAN'T EDIT ME!!!</div> <div>Some More editable code here </div> </textarea> </form> 

Does anyone know if this is possible? So far, I have not tried to succeed. I also did not see anything in the documentation. If this is not possible, do you know a similar editor where this is possible?

Answer 1

After you inserted, you should make the block locked. There are several problems:

1. When inserting a locked item

I assume this will be through the insertHTML command.

 editor.composer.commands.exec('insertHTML', lockedhtml); $(editor.composer.iframe).contents().find('.lockedForEditing').attr('contenteditable', 'false'); 

2. When initializing wysihtml

i.e. the locked item is in the contents of the text area. First you need to add your “lockedForEditing” class to the white list in wysihtml rules. then after initializing the composer you need to block the elements.

 editor.on('load', function(){ $(editor.composer.iframe).contents().find('.lockedForEditing').attr('contenteditable', 'false'); }); 

3. Prohibit content content to affect the content of a blocked item

If the user selects all the text inside the composer and stylizes it, the contents of the locked element will also be affected, even the contenteditable attribute will be false. Therefore, you need to use CSS so that the text inside the locked element is not selected

 -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 

Humble advice, instead of using the div tag for a locked item, you may prefer the section tag that you reserve for locking.