javascript - 从 TinyMCE 插件访问数据

Question

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

我尝试紧跟教程，但是我找不到在 onsubmit 回调中从插件获取数据的方法。

这是一个简化的plugin.js

tinymce.PluginManager.add('imageselect', 函数(编辑器, 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);
    }
        });
    }
});

});

我还在我的应用程序中添加了路由和 View 来呈现自定义窗口。它显示得很棒。

<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>

我的想法是在此 View 中编写一些 JavaScript 来填充名称为 selected_image 的文本框的值。然后，我想在该窗口关闭时获取该值并将其附加到编辑器中。

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

我缺少什么接线才能使其正常工作？

Answer 1

因此，我进一步研究了这个问题，并希望报告我的解决方案，以防其他人遇到同样的问题。

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

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

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

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