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

时间:2012-12-10 22:39:09

标签: javascript wordpress iframe tinymce thickbox

好的,这是在扼杀我。我写了一个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'添加到我的按钮,但这在我的普通弹出窗口后面创建一个厚盒模式有一个奇怪的效果。

任何人都知道如何以正确的方式做到这一点?提前谢谢!

1 个答案:

答案 0 :(得分:5)

  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。

  2. 在按钮的命令中,使用tb_show()在厚箱中打开所需的内容:

    tb_show('myInteractions', '#TB_inline?height=300&width=400&inlineId=interactions_wrapper');
    
  3. 我从我输入到jQuery(内联内容)页面底部的div中获取了我的thickbox内容。 您也可以使用iframe。 这可能会有助thickbox.net