10

我试图找出如何让人们在 Tiny MCE 编辑器中缩进。现在，只要有人按下tab，他们就会进入下一个字段。是否有任何代码可以让他们实际点击tab并让它为新段落创建一个选项卡。

4

6 回答 6

24

对于较新版本的 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;
        }
    });
}
于 2013-11-20T09:35:42.257 回答
9

您可以捕获此事件，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;
          }
      });
   }
});

如果用户在段落的开头或结尾插入制表符，它将被浏览器删除（解决方法是插入一个预定义长度的特殊字符，而不是制表符）。

于 2012-11-26T09:16:51.663 回答
4

Thariama 的解决方案并不适合我。我同意 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();
          }
      });
   }
});
于 2013-10-31T15:26:41.067 回答
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;
            }
        }
      });
   }
});
于 2014-11-07T13:16:36.107 回答
4

它可以通过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/nonbreak/

于 2016-11-30T12:00:22.027 回答
1

您可以使用以下代码轻松添加选项卡空间

    ed.on('keydown',function(evt){
            if (evt.keyCode==9) {
                ed.execCommand('mceInsertContent', false, '<span class="mce-nbsp">&emsp;&emsp;&emsp;&emsp;</span>');
                tinymce.dom.Event.cancel(evt);
                return;
            }
    });
于 2017-01-19T07:43:08.127 回答