在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

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

1。插入锁定元素

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

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

2。关于wysihtml的初始化

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

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

3。防止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标记作为锁定元素。