如何为 WordPress 中的自定义 TinyMCE 按钮分配 href 值？答案

【问题标题】：How do I assign an href value to a custom TinyMCE button in WordPress?如何为 WordPress 中的自定义 TinyMCE 按钮分配 href 值？
【发布时间】：2012-12-10 22:39:09
【问题描述】：

好吧，这可要了我的命。我编写了一个 WordPress 插件，它向 TinyMCE 编辑器添加了一个自定义按钮，效果很好，除了按钮触发的选项弹出窗口的加载方式与 WP 原生的类似弹出窗口不同...

具体来说，当您在 WordPress 中单击 TinyMCE 工具栏上方的“添加媒体”按钮时，“添加媒体”窗口将以漂亮的厚框模式打开。它还加载到 iframe 中，因为获取输出的按钮 HTML 包装在带有 URL href 值的锚标记中：

<a href="http://.../wp-admin/media-upload.php?post_id=916&amp;TB_iframe=1&amp;width=640&amp;height=354" class="thickbox add_media" id="content-add_media" title="Add Media" onclick="return false;">

但是当我的按钮的 HTML 得到输出时，锚标记的 href 值为 'javascript:;':

<a role="button" id="content_companyinfo" href="javascript:;" class="mceButton mceButtonEnabled mce_companyinfo" onmousedown="return false;" onclick="return false;" aria-labelledby="content_companyinfo_voice" title="Insert company info fields" tabindex="-1">

这是我的 TinyMCE 编辑器插件代码：http://pastebin.com/kuQJRHJR

这里是添加媒体按钮的 WP 核心 TinyMCE 编辑器插件：http://core.trac.wordpress.org/browser/trunk/wp-includes/js/tinymce/plugins/media/editor_plugin_src.js

TinyMCE addButton 函数不允许您设置 href 值，只能设置链接到您使用 addCommand 创建的自定义命令函数的 cmd 值。

我尝试在 addButton 函数的设置中将“thickbox”类添加到我的按钮中，但这会产生奇怪的效果，即在我的正常弹出窗口后面创建一个厚框模式。

有人知道如何以正确的方式做到这一点吗？提前致谢！

【问题讨论】：

标签： javascript wordpress iframe tinymce thickbox

【解决方案1】：

在你插件的 editor_plugin.js init 函数中添加这个函数：

ed.onInit.add(function(ed, evt) {
 // make that the interactions window will open in a thickbox by adding the button the right attributes
       jQuery('#content_myInteractions').addClass('thickbox');
});

将“content_myInteractions”更改为您的按钮 ID。

在您的按钮命令中，使用tb_show() 在厚框中打开您想要的内容：

tb_show('myInteractions', '#TB_inline?height=300&width=400&inlineId=interactions_wrapper');

我使用 jQuery（内联内容）将我输入的 div 中的厚框内容放到页面底部。您也可以使用 iframe。这可能会帮助thickbox.net

【讨论】：