javascript - "lock"wysiHTML5 中的一部分 HTML

Question

我正在使用 https://github.com/xing/wysihtml5对于我的代码库中的编辑器，我想“锁定”部分代码使其不可编辑，如下所示:

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

有人知道这是否可行吗？到目前为止，我尝试了几种方法都没有成功。我也没有在文档中看到任何内容。如果这是不可能的，你知道有可能的类似编辑器吗？

Answer 1

插入后必须使 block “锁定”。有几个问题需要处理:

1。在插入锁定元素时

我假设，它将通过 insertHTML 命令。

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

2。关于wysihtml的初始化

即锁定的元素在文本区域的内容中。首先，您需要将“lockedForEditing”类添加到 wysihtml 规则的白名单中。然后在 composer 初始化后你需要锁定元素。

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

3。防止contenteditable命令影响锁定元素的内容

如果用户选择 composer 中的所有文本并为其设置样式，即使 contenteditable 属性为 false，锁定元素的内容也会受到影响。因此，您需要使用 CSS 使锁定元素内的文本不可选择

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

一个谦虚的建议，而不是为你的锁定元素使用 div 标签，你可能更喜欢 section 标签，你为锁定保留。