TinyMCE, Rails 4 and execcommand_callback

Question

I've been trying to get TinyMCE to use a custom execcommand_callback handler to perform actions when the File Menu::New Document option is selected, but have been unable to get it to work at all, even on the most basic level. The project is on Rails 4, and I'm using the tinyMCE-rails gem from:

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

and following the example from:

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

I've put the following in tinymce.yml

execcommand_callback: "myCustomExecCommandHandler"

The resulting 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>

To all appearances, this does nothing. Doesn't even raise a warning or error. What am I doing wrong?

Answer 1

Ok, I figure I should wrap this up for anyone else interested in this question, and thanks to Nishant for getting me on the right track.

Using TinyMCE 4 with the tinymce-rails gem (https://github.com/spohlenz/tinymce-rails) is straightforward and requires less configuration. Since I wanted the ability to embed links and images, my tinymce.yml file looks like:

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

An my custom command handler looks like:

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

}

You can see it work here: http://fiddle.tinymce.com/uRdaab/4

Answer 2

There is no problem in your callback . It works fine .

Check http://fiddle.tinymce.com/pRdaab

There is some problem here in plugins line , when you remove image and link it works . Check my fiddle and here is the code . I dont know why but try to figure that. image is usually advimage , not sure about link plugin / feature however .

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

So normally its good to use a classic TinyMCE init and then work on it . Its better to first get TinyMCE working properly and then examine add the call back functionality . One issue at a time saves a lot of troubleshooting . I am trying to implement that in my programming skills too !