5

ボタンを使用すると、コンテンツ編集可能な選択に対して簡単に execcommand を実行できます。ただし、他の要素を使用すると失敗します。

http://jsbin.com/atike/edit

これはなぜですか、また div 要素を使用して機能させるにはどうすればよいですか。

ありがとう。

4

4 に答える 4

11

mousedownボタンの代わりに使用されている要素のイベントを使用して選択を保存し、イベントで編集可能な要素にフォーカスした後に再度復元することができclickます。

サンプル コードを変更しました: http://jsbin.com/atike/40/edit。コードは次のとおりです。

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            var ranges = [];
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
            return ranges;
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(savedSel) {
    if (savedSel) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            for (var i = 0, len = savedSel.length; i < len; ++i) {
                sel.addRange(savedSel[i]);
            }
        } else if (document.selection && savedSel.select) {
            savedSel.select();
        }
    }
}

$(function() {
  var savedSel;

  $('.bold').mousedown(function () {
    savedSel = saveSelection();
  });

  $('.bold').click(function () {
    $('#hello').focus();
    if (savedSel) {
      restoreSelection(savedSel);
    }
    document.execCommand("bold", false, null);    
  });
});
于 2011-04-14T14:29:38.743 に答える
1

すべてではないにしても、ほとんどの WYSIWYG エディターiframeは、選択を失わないようにするために要素を使用します。もう 1 つの方法は、私は試していませんが、mouseupイベントがトリガーされた後にそのページで行われた各選択を保存することです。

Gecko の組み込みリッチ テキスト エディタであるMidasに関するこのページをご覧ください。

于 2009-09-26T23:24:51.323 に答える
1

何が起こっているかというと、テキスト ノードをクリックすると、ブラウザはそのテキストを選択しようとします。ボタンはテキスト フローの一部ではないため、新しい選択をトリガーしません。

ブラウザが再選択を実行しないようにするだけです。現在監視しているclickイベントが実行されると、選択はすでに行われており、行動するには遅すぎます。アクションmousedownは、特別な選択イベントを持つ MSIE 以外のすべてのブラウザで開始されます。

これはブラウザ間で機能します：

jQuery('.bold')
  .attr('unselectable','on') // prevents selection in MSIE
  .bind('mousedown',function (e) {
    document.execCommand("bold", false, null);
    e.preventDefault(); // prevents selection in all but MSIE
  });

unselectableMSIE の選択イベントの使用にはいくつかの複雑な問題 (ドラッグもブロックする必要があるなど) があるため、特殊な属性(値 "on" が必要)を持つボタンとして使用している要素の選択可能性をノックアウトする方が簡単です。 ）。

明らかにexecCommand、イベントで処理をclick実行し、「ボタン」として意図されたすべての要素で選択防止コードを実行することができます:

jQuery('.buttonlike')
  .attr('unselectable','on') // prevents selection in MSIE
  .bind('mousedown',function (e) {
    e.preventDefault(); // prevents selection in all but MSIE
  });

jQuery('#edit-bold').click(function(){
  document.execCommand("bold", false, null);
});
于 2011-04-15T12:11:51.343 に答える
0

NicEditは複数の方法を組み合わせて使用​​します。

  • ほとんどのツールバー要素には「選択不可」属性が設定されています。これは Internet Explorer で機能します。

  • 同じ要素で、「mousedown」イベントに登録し、デフォルト アクションをオーバーライドします。これにより、テキスト ソリューションとフォーカスの両方が妨げられます。これは IE 以外のブラウザ専用です。

  • リンクや画像を挿入するためのフィールドなど、一部のツールバー要素は、テキスト フォーカスを受け取り、選択できる必要があります。これらの場合、エディターがフォーカスを失う前に選択を保存し、ユーザーが編集を終了して変更が必要になった後に復元します。

    実装方法については、NicEdit のコードを確認してください。関数名を検索します。

    • getSel
    • getRng
    • 販売
    • 保存する
    • リストアリング

    ...

    これは、ブラウザーの getSelection() または document.selection を使用して選択範囲を取得し、getRangeAt() を使用して範囲に変換し、addRange() または select() を使用してその範囲を選択範囲として復元します。

于 2011-04-14T00:39:22.883 に答える