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

如果用户按Tab键，您可以捕获此事件和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

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, '&emsp;&emsp;');
            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, '&emsp;&emsp;'); // inserts tab
            event.preventDefault();
            return false;
        }
        if (event.keyCode == 32) {
            if (event.shiftKey) {
                ed.execCommand('mceInsertContent', false, '&hairsp;'); // 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/

上找到

Answer 6

您可以使用以下代码轻松添加标签空间

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

微小的MCE：如何让人们缩进

6 个答案: