在 TinyMCE 中以编程方式插入新行

Question

我正在使用 tinyMCE，我想在按下快捷键后以编程方式添加一个新行。

我有下面的代码，来测试这个例子click here

<!DOCTYPE html>
<html>
<head>
  <script src="jquery.min.js"></script>
  <script src="tinymce/tinymce.min.js"></script>
</head>
  <body>
    <textarea></textarea>
  </body>
</html>
<script>
  tinymce.init({
    selector:'textarea',
    plugins: 'table',
    menubar: 'table',
    toolbar: 'table',
    table_grid: false,
    height: 500,

    setup: function(editor) {
      editor.shortcuts.add('ctrl+alt+a', "description of the shortcut", function() {
        alert('test successful'); //i want to insert a new row here
      });
   }
  });
</script>

Answer 1

TinyMCE 使用命令来执行它的许多功能。如果您查看在上方和下方插入行的现有功能，它们依赖于命令。你可以在你的配置中的setup()函数中使用一个简单的函数来查看TinyMCE何时使用命令：

editor.on('ExecCommand', function (e) {
  console.log('ExecCommand:');
  //console.log(e);
  console.log(e.command);
});

您将从中看到，有两个命令与这些活动相关联：

mceTableInsertRowAfter
mceTableInsertRowBefore

因此您可以将自己的击键与这些命令相关联。例如，您可以在 setup() 函数中执行此操作：

editor.shortcuts.add('ctrl+alt+a', "description of the shortcut", function() {
  editor.execCommand('mceTableInsertRowAfter', false);
});

然后您可以设置一次击键用于之前插入，一次用于插入之后。这是一个 TinyMCE fiddle，显示了所有这些操作：https://fiddle.tiny.cloud/lyhaab/3

我设置了两个快捷键：

CTRL+ALT+A for mceTableInsertRowAfter
CTRL+ALT+B for mceTableInsertRowBefore

在 TinyMCE 中以编程方式插入新行

Insert new row programmatically in TinyMCE

html

jquery

tinymce