"lock" a portion of HTML in wysiHTML5

Question

I'm using https://github.com/xing/wysihtml5 for an editor in my code base and I'd like to "lock" portions of the code to not be editable, like so:

<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? I've tried several ways so far with no success. I've also not seen anything in the documentation. If this isn't possible, do you know a similar editor where it is possible?

Answer 1

You have to make block "locked" after you have inserted. There are several issues to handle:

1. On insertion of locked element

I assume, it will be via insertHTML command.

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

2. On initialization of wysihtml

i.e. locked element is in the contents of text area. First you need to add your "lockedForEditing" class to whitelist in wysihtml rules. then after composer initialized you need to lock elements.

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

3. Prevent contenteditable commands affect contents of locked element

If user selects all text inside composer and styles it, your locked element's content will also be affected even contenteditable attribute is false. So you need to use CSS to make text inside locked element not-selectable

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

An humble advise, instead of using div tag for your locked element, you may prefer section tag, which you reserve for lock.