I'm using 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?

I'm using https://github./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?

• javascript
• html
• wysiwyg
• wysihtml5

Share Improve this question Follow asked Feb 12, 2013 at 0:30 BradBrad 6,36277 gold badges3434 silver badges4545 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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 mand.

editor.poser.mands.exec('insertHTML', lockedhtml);
$(editor.poser.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 poser initialized you need to lock elements.

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

3. Prevent contenteditable mands affect contents of locked element

If user selects all text inside poser 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.