Question

我目前正在尝试为tinyMCE编写自定义插件，并从另一个网址加载插件。

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

但是，我的tinyMCE使用init的jQuery插件，因此我发现很难让tinyMCE加载它。

此stackoverflow问题说明了我的确切问题，但似乎没有解决方案

Create and register TinyMCE plugin with jQuery

任何人都知道如何做到这一点？下面是我在anon函数中的示例插件。

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

})();

尝试在init上注册插件，但未定义a.load。

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

尝试直接在tinyMCE js之后包含文件，并将“插件”添加到插件参数中。 .TinyMCE继续尝试从plugins文件夹加载它。

Answer 1

我认为在另一个堆栈溢出问题上的jQuery加载顺序消息是一个红色的鲱鱼保罗。或许我误解了你的问题。但我目前正在使用带有jQuery插件的tinymce版本4.0.12，并从自定义目录加载我自己的自定义插件。您应该在匿名函数调用中加载您的tinymce初始化器，但我不会从一个内部加载您的插件。

这有点简化，但我的js文件的加载顺序是这样的：

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

这些路径包括我编写的2个自定义插件，名为pps_save和pps_font_format，我用它来覆盖我想要做的一些自定义事项的默认值。无论如何，pps_save插件的插件代码如下所示：

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

然后，tinymce初始化代码看起来像这样：

  $(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: ...
      ...

    });

  });

我也使用了命名约定的道歉，但请注意，你可以在一个插件中创建多个不同的按钮（即pps_save，pps_revert），所以在我的tinymce初始化器中，我在插件中加载了pps_save插件： []数组然后使用我在工具栏中的插件中创建的pps_save“Button”以及我的pps_revert按钮。

无论如何，希望有所帮助，一切顺利。

Answer 2

问题有点旧，但也许有人可以找到这个有用的

tinymce.PluginManager.load()方法适用于Tinymce 4+

（另见评论here）

您可以在加载tinymce之后以及使用tinymce（或独立）启动jquery之前以这种方式加载任何外部插件

此方法允许插件加载自己的css /语言包等，就像安装在默认文件夹中的插件一样。

以下示例来自我的一个应用程序的自定义插件（您还需要在tinymce options.plugins等中添加插件...当然要启用）

html页面

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

插件文件夹结构

自定义插件，在TinyMCE jQuery插件的自定义目录中

2 个答案: