微小的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以防用户按Tab键.

// 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

这里给出的答案不太符合我的要求，因为我需要在行中间缩进文本。我列出了办事处分支机构的名称，并希望将它们的电话号码对齐在一起。由于每个办公室名称的长度不同，我尝试了 @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;
            }
        }
      });
   }
});