4

我在我的代码库中使用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>

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

4

1 回答 1

8

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

1. 插入锁定元件

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

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

2. 关于 wysihtml 的初始化

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

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 标签作为锁定元素。

于 2013-06-24T10:51:34.087 回答