TinyMCE4 文档目前令人沮丧。我有一个与 Ruby on Rails 兼容的插入图像插件,但它依赖于已弃用的 tiny_mce_popup.js。没有关于我应该如何更新插件以规避使用该文件的信息。
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();
}
TinyMCE 3 依赖 tiny_mce_popup.js 在父级和对话之间交换变量。TinyMCE 4 取消了 dialog.htm 和 tiny_mce_popup.js
如果你看一下图像插件,editor.windowManager.open
你可以看到对话是单独通过 JS 创建的。这消除了通过opener
. 如果可以,请坚持使用此模板方法。
我选择坚持使用 dialog.htm,但我是从 rails 提供的,所以我不会处理与 JS 交换表单 auth_token 的问题。如果您这样做,请记住插入您的内容应该来自插件,而不是来自您的对话。这是我的简单图片上传器:
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 传递您的附件初始化参数。如果我在 gem 中构建它,它将与tinymce-rails兼容,我会更新这个答案。
更新:TinyMCE 现在有这个关于从 3.x 迁移的页面:http ://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x