Tinymce 微型MCE：如何允许人们缩进

我试图找出如何允许人们在微型MCE编辑器中缩进。现在，只要有人按下

选项卡

，他们就进入下一个字段。是否有任何代码允许他们实际点击

tab

，并让它为新段落创建一个选项卡

如果用户按tab键，您可以捕获此事件并

停止播放/返回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;
          }
      });
   }
});

---

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

Thariama的解决方案对我来说不太管用。我同意乔恩·霍尔卡的说法。这似乎在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();
          }
      });
   }
});

---

对于较新版本的Tiny MCE editor，以下解决方案适合我：

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;
        }
    });
}

---

这里给出的答案与我的要求不太匹配，因为我需要在中间行缩进文本。我列出了办公室分支机构的名称，并希望他们的电话号码对齐。由于每个办公室名称的长度不同，我尝试将@Mac的答案和空格组合在一起，但我无法获得足够的准确度，因此我使用shift键和空格键添加了一个小空格选项，使我可以将所有内容完美地排成一行。唯一的缺点是tinymce的默认实体不包括

&hairsp所以我不得不将默认实体列表添加到我的设置中，并在末尾添加“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;
            }
        }
      });
   }
});

这可以通过tinymce中提供的非中断插件完成

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

详细信息可在
上找到。您可以使用以下代码轻松添加选项卡空间

ed.on（'keydown'，函数（evt）{
if（evt.keyCode==9）{
ed.execCommand（'mceInsertContent'，false，&emsp；&emsp；&emsp；&emsp；&emsp；'）；
tinymce.dom.Event.cancel（evt）；
返回；
}
});
本文讨论了这个问题：@Tim我很困惑。每次我在网上搜索这个问题时，我都会找到与问题相反的人的链接。当我点击tab时，它跳到下一个字段。似乎每当其他人点击标签时，它都不会跳转到下一个字段（你的文章也是如此）。有没有办法阻止光标跳转到下一个字段。现在，它插入了选项卡，但也移到了下一个字段。这是我的失败（有必要停止事件冒泡），我在上面的代码中更正了它。这对我来说很有效。我将
'mceInsertRawHTML'
更改为
'mceInsertContent'
，
'\x09'
更改为
'&emsp&emsp；'。另外，
evt.preventDefault（）无
evt.stopPropagation（）；返回false足以抑制默认行为，并且仍然允许其他脚本处理此事件。也可以使用“缩进，向外缩进”按钮缩进（但这取决于不同的用例，这不是所需的）.I get:Uncaught TypeError:无法调用未定义的方法“add”。这与制表符不同。我也在努力解决这个问题@richard.holmes。你的解决方案是目前为止最好的。最好的方法是选项卡跟随一个不可见的网格，以x像素为增量。因此，从0开始，它将转到25px，并且即使在一条直线的中间，它也会沿着初始起始位置增加25px的下一个网格线。对于这一点，我没有找到任何例子。
    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;
            }
    });