1

我正在尝试为 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 评估为未定义。

我缺少哪条接线才能使其正常工作？

4

1 回答 1

1

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

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

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

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

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

于 2013-08-26T04:16:42.473 回答