从TinyMCE插件访问数据

Accessing Data From TinyMCE Plugin

本文关键字：数据 访问 插件 TinyMCE      更新时间：2023-09-26

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

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

这是一个简化的插件.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。

我缺了哪根电线才能正常工作？

所以我对此进行了进一步的研究，并希望报告我的解决方案，以防以后有人遇到同样的问题。

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

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

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

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

相关文章：