Как мне обновить плагин TinyMCE, используя tiny_mce_popup.js для версии 4?

Question

Документация TinyMCE4 в настоящее время мрачна. У меня есть плагин для вставки изображений, совместимый с Ruby on Rails, но он использует устаревший tiny_mce_popup.js. Там нет информации о том, как я должен обновить плагин, чтобы обойти использование этого файла.

Answer 1

TinyMCE 3 полагался на tiny_mce_popup.js для обмена переменными между родителем и диалогом. TinyMCE 4 покончил с dialog.htm и с tiny_mce_popup.js

Если вы посмотрите на плагин изображения, следуя editor.windowManager.open Вы можете видеть, что диалог создается только через JS. Это устраняет необходимость тупого доступа к родительским переменным через opener, Если вы можете, придерживайтесь этого метода шаблона.

Я решил придерживаться dialog.htm, но я обслуживал его с рельсов, поэтому мне не пришлось бы обмениваться формой auth_token с JS. Если вы делаете это, помните, что вставка вашего контента должна происходить из плагина, а не из вашего диалога. Это мой простой загрузчик изображений:

tinymce.PluginManager.add('railsupload', function(editor, url) {
  var win, data, dom = editor.dom

  // Add a button that opens a window
  editor.addButton('railsupload', {
    icon: 'image',
    tooltip: 'Insert image',
    onclick: showDialog
  });

  function showDialog() {
    win = editor.windowManager.open({
      title: 'Insert image',
      name: 'railsupload',
      url: '/attachments/tinymce?owner_type=' + editor.settings.owner_type + '&owner_id=' + editor.settings.owner_id,
      width: 200,
      height: 220,
      bodyType: 'tabpanel',
      buttons: [{
        text: 'Insert',
        onclick: submitForm
      }]
    });
  }

  function submitForm() {
    editor.insertContent("<img src=\"" + self.frames[1].document.img_url + "\" />")
    win.close()
  }
});

Вам понадобится контроллер вложений rails, и вам нужно будет передавать параметры инициализации вложений через URL. Если я соберу это в гем, он будет совместим с tinymce-rails, и я обновлю этот ответ.

Обновление: теперь у TinyMCE есть эта страница о миграции с 3.x: http://www.tinymce.com/wiki.php/Tutorial%3aMigration_guide_from_3.x

Answer 2

TinyMCE 4 устарел старый file_browser_callback в пользу нового file_picker_callback преимущество в том, что он может возвращать метаданные.

tinymce.init({
    selector: 'textarea.tinymce',
    file_picker_callback: function (callback, value, meta) {
        myFilePicker(callback, value, meta);
    },
    plugins: ['link image'],
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
});

function myFilePicker(callback, value, meta) {
    tinymce.activeEditor.windowManager.open({
        title: 'File Manager',
        url: '/Site/FileManager?type=' + meta.filetype,
        width: 650,
        height: 550,
    }, {
        oninsert: function (url) {
            callback(url);
        }
    });
}

В браузере файлов, чтобы вернуть файл на главную страницу, которую вы называете mySubmit('/images/file_123.jpg') когда вы нажимаете на гиперссылку или изображение.

function mySubmit(url) {
    top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
    top.tinymce.activeEditor.windowManager.close();
}