如何使用带有自定义对话框的 TinyMCE 自定义按钮来添加内容？答案

【问题标题】：How to use TinyMCE custom button, with custom dialog, to add content?如何使用带有自定义对话框的 TinyMCE 自定义按钮来添加内容？
【发布时间】：2011-01-13 17:54:38
【问题描述】：

TinyMCE 编辑器允许您将自定义按钮分配给其编辑器工具栏。我这样做并将其连接到 Flickr 帐户，因此会出现一个自定义对话框，其中包含一系列图像。

我希望用户能够单击任何图像并将该图像的 URL 添加到原始输入中，从那里单击自定义 TinyMCE 按钮。

这是我拥有的 TinyMCE 自定义按钮代码：

setup : function(ed) {
    // Add a custom button
    ed.addButton('flickr', {
        title : 'Add Flickr Image',
        image : 'styles/media_icons/flickr.png',
        onclick : function() {
            // Add your own code to execute something on click

            $("div.mediaLibraryPopup .box").load("scripts/loadMediaLibrary.php");
            $("div.mediaLibraryPopup").fadeIn("slow").addClass(container);

        }
    });
}

然后，当您单击图像时，我有这个 jQuery 来处理该事件：

$("div.mediaLibraryPopup img").live("click", function() {
    var url = $(this).attr("src");
    $("div.mediaLibraryPopup").fadeOut("slow");
});

我一直在阅读 TinyMCE 文档并使用它几个小时，但我不知道如何将该 URL 变量传递回 TinyMCE“ed”事件，以便它可以将其添加到输入中。

由于我将在多个输入上使用它，因此我也不能只对输入类进行硬编码。有什么想法吗？

【问题讨论】：

这是文本输入还是文本区域？为了清楚起见，您希望将 URL 附加到 TinyMCE 实例正确吗？
您可以将设置函数中的“ed”存储在某处然后使用它吗？

标签： php javascript jquery editor tinymce

【解决方案1】：

我认为您需要在编辑器的当前光标位置插入 URL。如果是这种情况，那么您可以使用此命令插入内容：

tinyMCE.execCommand('mceInsertContent',false,'Your Content Goes Here...');

希望这会有所帮助:)

【讨论】：