Пользовательский плагин в пользовательском каталоге для плагина TinyMCE jQuery

В настоящее время я пытаюсь написать собственный плагин для tinyMCE и загрузить плагин с другого URL-адреса.

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

Тем не менее, мой tinyMCE использует плагин jQuery для инициализации, и поэтому мне трудно заставить его загрузить tinyMCE.

Этот вопрос stackoverflow иллюстрирует мою точную проблему, но, похоже, не имеет решения

Создайте и зарегистрируйте подключаемый модуль TinyMCE с помощью 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);

})();

Пробовал зарегистрировать плагин при инициализации, но получить a.load не определено.

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

Попытался просто включить файл после tinyMCE js напрямую и добавить «плагин» в параметр плагинов. .TinyMCE продолжает попытки загрузить его из папки плагинов.


person Squiggs.    schedule 14.02.2014    source источник


Ответы (2)


Я думаю, что сообщение о порядке загрузки jQuery по этому другому вопросу о переполнении стека - это что-то вроде отвлекающего маневра, Пол. Или, возможно, я неправильно понимаю ваш вопрос. Но в настоящее время я использую tinymce версии 4.0.12 с плагином jQuery и загружаю свои собственные плагины из пользовательского каталога. Вы должны загрузить свой инициализатор 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, которую я создал в своем плагине на панели инструментов, вместе с моей кнопкой pps_revert.

В любом случае, надеюсь, что это поможет, всего наилучшего.

person 2potatocakes    schedule 15.02.2014
comment
Эй, спасибо за это, мне было интересно, выяснили ли вы, как заставить версии jquery tinymce использовать связанные плагины WP, такие как wp link - person myol; 01.02.2015

вопрос немного устарел, но может кому пригодится

Метод tinymce.PluginManager.load() работает и для Tinymce 4+.

(см. также комментарий здесь)

Вы можете загрузить любой внешний плагин таким образом после загрузки tinymce и до инициализации tinymce с jquery (или автономно)

Этот метод позволяет плагину загружать свои собственные пакеты css/language и так далее, как это может делать плагин, установленный в папке по умолчанию.

Пример ниже из одного из моих пользовательских плагинов для приложения (вам также нужно добавить плагин в 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'));
        }
    });
});

структура папки плагина

введите здесь описание изображения

person Nikos M.    schedule 13.01.2016