tinymce - Tiny MCE: インデントを許可する方法

Question

Tiny MCE エディターで人々がインデントできるようにする方法を見つけようとしています。現在、誰かが押すたびtabに、次のフィールドに移動します。tab実際にヒットして新しい段落のタブを作成できるようにするコードはありますか。

Answer 1

Tiny MCE エディターの新しいバージョンでは、次の解決策が役に立ちました。

setup: function(ed) {
    ed.on('keydown', function(event) {
        if (event.keyCode == 9) { // tab pressed
          if (event.shiftKey) {
            ed.execCommand('Outdent');
          }
          else {
            ed.execCommand('Indent');
          }

          event.preventDefault();
          return false;
        }
    });
}

Answer 2

stopPropagation/return falseユーザーがタブを押した場合に、このイベントをキャッチできます。

// Adds an observer to the onKeyUp event using tinyMCE.init
tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onKeyDown.add(function(ed, evt) {
          console.debug('Key up event: ' + evt.keyCode);
          if (evt.keyCode == 9){ // tab pressed
            ed.execCommand('mceInsertRawHTML', false, '\x09'); // inserts tab
            evt.preventDefault();
            evt.stopPropagation();
            return false;
          }
      });
   }
});

ユーザーが段落の先頭または末尾にタブを挿入すると、ブラウザによって削除されます (これを回避するには、タブではない定義済みの長さの特殊文字を挿入します)。

Answer 3

タリアマの解決策は私にはうまくいきませんでした。Jon Hulka の修正に同意します。これは、Firefox (mac+pc)、Chrome (mac+pc)、および Internet Exploder で問題なく動作するようです。完璧ではありませんが、非常に使いやすく、受け入れられると思います。ありがとうジョン

したがって、op Jon のソリューションをラップするには:

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onKeyDown.add(function(ed, evt) {
          if (evt.keyCode == 9){
            ed.execCommand('mceInsertContent', false, '  ');
            evt.preventDefault();
          }
      });
   }
});

Answer 4

行の途中でテキストをインデントする必要があるため、ここでの回答は私の要件と完全には一致しませんでした。私は支店の名前をリストしていて、それらの電話番号を一列に並べたいと思っていました。各オフィス名の長さが異なるため、@Mac の回答とスペースを組み合わせてみましたが、十分な精度が得られなかったため、Shift キーとスペースバーを使用して小さなスペース オプションを追加し、すべてを完全に並べることができました。 . 唯一の欠点は、tinymce のデフォルト エンティティが含まれていないことです。その ため、デフォルト エンティティ リストを設定に追加し、最後に「8202,hairsp」を追加する必要がありました。

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.on('keydown', function(event) {
        if (event.keyCode == 9) { // tab pressed
            ed.execCommand('mceInsertContent', false, '  '); // inserts tab
            event.preventDefault();
            return false;
        }
        if (event.keyCode == 32) { // space bar
            if (event.shiftKey) {
                ed.execCommand('mceInsertContent', false, ' '); // inserts small space
                event.preventDefault();
                return false;
            }
        }
      });
   }
});

Answer 5

tinymce で利用可能な非互換プラグインを介して実行できます。

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "nonbreaking",
  mewnubar: "insert",
  toolbar: "nonbreaking",
  nonbreaking_force_tab: true
});

詳細はhttps://www.tinymce.com/docs/plugins/nonbreaking/にあります。