Question

我正在尝试为TinyMCE创建一个简单的插件，它可以传回一个值以插入编辑器。由于我的要求，我需要使用自定义窗口。

我试图接近教程但是我找不到从onsubmit回调中的插件中获取数据的方法。

这是一个简化的plugin.js

tinymce.PluginManager.add（'imageselect'，function（editor，url）{

editor.addButton('imageselect', {
    text: 'Add Image',
    onclick: function() {
        editor.windowManager.open({
    id: "imageselect",
            title: 'Add New Image',
            url: '/photos/thumbs',
            width: 800,
            height: 600,
            buttons: [{
                text: 'Select Image',
                onclick: 'submit'
            }],
       onsubmit: function(e) {
       editor.insertContent(e.data.selected_image);
    }
        });
    }
});

}）;

我还在我的应用程序中添加了一个路径和视图来呈现自定义窗口。它显示出很棒。

<div id="thumb_container">
    <input type="textbox" name="selected_image" value="foobar" />
    <% @photos.each do |p| %>
        <div style="float: left; margin: 1em;">
            <%= image_tag p.image.url(:thumb), class: "thumb img-polaroid" %> <br />
        </div>
    <% end %>
</div>

我的想法是在此视图中编写一些javascript，以使用名称selected_image填充文本框的值。然后，我希望在此窗口关闭时获取该值并将其附加到编辑器。

问题是当编辑器关闭并执行onsubmit的回调时，e.data.selected_image的计算结果为undefined。

我错过了什么样的布线才能使其正常工作？

Answer 1

所以我进一步深入研究了这个问题，想要报告我的解决方案，因为其他人在路上遇到同样的问题。

我需要做的是在我的自定义窗口中添加一些TinyMCE javascript。然后我添加了一个事件处理程序来更新编辑器。

下面的代码段可用于从我的自定义页面中访问编辑器。

window.parent.tinyMCE.activeEditor.execCommand( 'mceInsertContent', 0, selected_image );
tinyMCEPopup.close();

我不完全确定这是否是处理事情的最佳方式，并且在接受我自己的答案之前会接受其他解决方案和建议。

从TinyMCE插件访问数据

1 个答案: