在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標簽為您的鎖定元素，您可能更喜歡部分標記，您保留鎖定。