TinyMCE、Rails 4 和 execcommand_callback

Question

我一直在尝试让 TinyMCE 在选择 File Menu::New Document 选项时使用自定义 execcommand_callback 处理程序来执行操作，但根本无法让它工作，即使在最基本的级别上也是如此.该项目在 Rails 4 上，我正在使用来自以下位置的 tinyMCE-rails gem：

https://github.com/spohlenz/tinymce-rails

并遵循以下示例：

http://www.tinymce.com/wiki.php/Configuration3x:execcommand_callback

我已将以下内容放入 tinymce.yml

execcommand_callback: "myCustomExecCommandHandler"

生成的html：

<script>
//<![CDATA[

function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {
    alert('hello');
}

//]]>
</script>

some html  ...

<form accept-charset="UTF-8" action="" id="homepage_form" method="post">
    <textarea class="tinymce" cols="10" id="editor" name="editor" rows="10"></textarea>
    <script>
      //<![CDATA[
      tinyMCE.init({"selector":"textarea.tinymce","document_base_url":"/",
          "theme_advanced_toolbar_location":"top","theme_advanced_toolbar_align":"left",
          "theme_advanced_statusbar_location":"bottom",
          "theme_advanced_buttons3_add":"tablecontrols,fullscreen,image,link",
          "plugins":"table,fullscreen,image,link",
          "execcommand_callback":"myCustomExecCommandHandler"});
      //]]>
     </script>

more form fields ...

</form>

从表面上看，这没有任何作用。甚至不会引发警告或错误。我究竟做错了什么？

Answer 1

好的，我想我应该为其他对此问题感兴趣的人总结一下，感谢 Nishant 让我走上正轨。

将 TinyMCE 4 与 tinymce-rails gem (https://github.com/spohlenz/tinymce-rails) 一起使用非常简单，并且需要较少的配置。由于我希望能够嵌入链接和图像，因此我的 tinymce.yml 文件如下所示：

document_base_url: /
plugins:
 - image
 - link
setup: "myNewDocumentHandler"

我的自定义命令处理程序如下所示：

function myNewDocumentHandler(ed) {
  ed.on('BeforeExecCommand', function(e) {
    if (e.command === 'mceNewDocument') {
      alert('New Document Command Handled');
    }
  });

}

你可以在这里看到它的工作原理：http://fiddle.tinymce.com/uRdaab/4

Answer 2

你的回调没有问题。它工作正常。

查看http://fiddle.tinymce.com/pRdaab

插件行中存在一些问题，当您删除图像并链接它时。检查我的小提琴，这是代码。 我不知道为什么，但试着弄清楚。 图片通常是 advimage，但不确定链接插件/功能。

<script type="text/javascript">

function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {alert('hello');}

tinyMCE.init({"selector":"textarea",
          "document_base_url":"/",
          "theme_advanced_toolbar_location":"top",
          "theme_advanced_toolbar_align":"left",
          "theme_advanced_statusbar_location":"bottom",
          "theme_advanced_buttons3_add":"tablecontrols,fullscreen",
          "plugins":"table,fullscreen",  

          "execcommand_callback":"myCustomExecCommandHandler"});  
</script>

<form method="post" action="dump.php">
    <textarea>Foo</textarea>
</form>

所以通常最好使用经典的 TinyMCE 初始化然后继续工作。最好先让 TinyMCE 正常工作，然后检查添加回调功能。一次解决一个问题可以节省大量故障排除。我也在尝试在我的编程技能中实现这一点！