Как мне обновить плагин TinyMCE, используя tiny_mce_popup.js для версии 4?
Документация TinyMCE4 в настоящее время мрачна. У меня есть плагин для вставки изображений, совместимый с Ruby on Rails, но он использует устаревший tiny_mce_popup.js. Там нет информации о том, как я должен обновить плагин, чтобы обойти использование этого файла.
2 ответа
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
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();
}