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ルールのホワイトリストに追加する必要があります。次に、composerが初期化された後、要素をロックする必要があります。

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

3.コンテンツ編集可能なコマンドがロックされた要素のコンテンツに影響を与えないようにする

ユーザーが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 に答える