Custom Plugin, in Custom Directory for TinyMCE jQuery plugin

Question

Im currently trying to write a custom plugin for tinyMCE, and load the plugin from another url.

http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin

However, my tinyMCE uses the jQuery plugin for init, and as such I'm finding it difficult to get tinyMCE to load it.

This stackoverflow question illustrates my exact problem , however doesn't seem to have a resolution

Create and register TinyMCE plugin with jQuery

Anyone any idea how to do this? Below is my example plugin inside an anon function.

(function() {

    var tinymce = $('textarea.tinymce').tinymce();

    // Create a new plugin class
    tinymce.create('tinymce.plugins.ExamplePlugin', {
        init : function(ed, url) {
            // Register an example button
            ed.addButton('example', {
                title : 'example.desc',
                onclick : function() {
                     // Display an alert when the user clicks the button
                     ed.windowManager.alert('Hello world!');
                },
                'class' : 'bold' // Use the bold icon from the theme
            });
        }
    });


    // Register plugin with a short name
    // Register plugin with a short name
    tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);

})();

Tried registering the plugin on init, but get a.load not defined.

oninit: function(ed) { 
            ed.PluginManager.load('filemanager', '/js/admin/pub/plugins/hr-core-class.js');
            }

Tried just including the file after the tinyMCE js directly, and adding the "plugin" to the plugins param. .TinyMCE continues to try and load it from the plugins folder.

Answer 1

I think the jQuery load order message on that other stack overflow question is a bit of a red herring Paul. Or perhaps I'm misunderstanding your question. But I'm currently using tinymce Version 4.0.12 with the jQuery plugin and am loading my own custom plugins from a custom directory. You should load your tinymce initialiser within an anonymous function call but I wouldn't load your plugin from within one.

This is a bit simplified but the load order of my js files would be something like this:

<script src="/javascripts/libs/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/javascripts/tinymce_dev/js/tinymce/tinymce.js" type="text/javascript"></script>
<script src="/javascripts/tinymce_dev/js/tinymce/jquery.tinymce.min.js" type="text/javascript"></script>
<script src="/javascripts/custom/plugins/pps_save/plugin.js" type="text/javascript"></script>
<script src="/javascripts/custom/plugins/pps_font_format/plugin.js" type="text/javascript"></script>

These paths include 2 custom plugins that I've written called pps_save and pps_font_format which I'm using to override the defaults with a few custom things I want to do. Anyways, the plugin code for the pps_save plugin looks something like this:

tinymce.PluginManager.add('pps_save', function(editor) {

  ...
  ...myCustomCode
  ...

  editor.addCommand('mce_pps_Save', saveMessage);
  editor.addCommand('mce_pps_Revert', revert);

  editor.addButton('pps_save', {
    icon: false,
    text: 'Save',
    cmd: 'mce_pps_Save',
    disabled: false
  });

  editor.addButton('pps_revert', {
    text: 'Revert',
    icon: false,
    cmd: 'mce_pps_Revert',
    disabled: false
  });

  editor.addShortcut('ctrl+s', '', 'mceSave');
});

And then the tinymce initialiser code looks something like this:

  $(function() {
    $('#msg_textarea').tinymce({

      ...
      ...

      plugins: [
        "advlist lists image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking table contextmenu directionality",
        "paste textcolor",
        "pps_save pps_font_format"
      ],
      toolbar1: "pps_save pps_revert | alignleft aligncenter alignright alignjustify | pps_font_select | pps_font_size_select",
      toolbar2: ...
      ...

    });

  });

Apologies for the naming convention I've used as well but note you can create multiple different buttons within a single plugin (ie pps_save, pps_revert), so within my tinymce initialiser above I'm loading the pps_save plugin in the plugins : [] array but then using the pps_save "Button" I created in my plugin in the toolbar along with my pps_revert button.

Anyways, hope that helps, all the best.

Answer 2

question bit old, but maybe someone can find this useful

The tinymce.PluginManager.load() method works for Tinymce 4+ as well

(see also comment here)

You can load any external plugin this way after tinymce is loaded and before initing tinymce with jquery (or standalone)

This method allows the plugin to load its own css/language packages and so on, like a plugin installed in default folder would be able to do.

Example below from one of my custom plugins for an application (you also need to add the plugin in tinymce options.plugins etc.. of course to be enabled)

html page

<script type="text/javascript" src="tinymce.min.js"></script>
<script type="text/javascript">tinymce.PluginManager.load('subquestion','./assets/tinymce/plugins/subquestion/plugin.min.js');</script>

plugin.js

tinymce.PluginManager.requireLangPack('subquestion');
tinymce.PluginManager.add('subquestion', function( editor, url ) {
    var _ = tinymce.util.I18n.translate,
        plugin_url = url + ('/' === url.slice(-1) ? '' : '/')
    ;

    // Loads a CSS file dynamically into the current document
    tinymce.DOM.loadCSS(plugin_url + '/plugin.css');

    // Add a button to the button bar
    editor.addButton('subquestion', {
        title: _('Subquestion'),
        icon: 'subquestion',
        onclick: function( ){
            alert(_('Open Subquestions'));
        }
    });

    // Add a menu item to the insert menu
    editor.addMenuItem('subquestion', {
        icon: 'subquestion',
        text: _('Subquestion'),
        context: 'insert',
        onclick: function( ){
            alert(_('Open Subquestions'));
        }
    });
});

plugin folder structure