访问WordPress的TinyMCE iFrame

使用jQuery我试图操纵WordPress内容编辑器，它在iframe中使用TinyMCE。 我似乎无法使以下代码按预期工作：

jQuery(document).ready(function($) { $('#content_ifr').ready(function() { $('#content_ifr').contents().find('body').css('background-color', '#f33'); }); 

无论我使用“.ready（）”还是“.load（）”，事件都会在TinyMCE编辑器（iframe的主体）完全加载之前触发。

但是，如果我在手动单击标题文本框以触发click事件之前等待iframe加载，则以下代码将起作用：

 jQuery(document).ready(function($) { $('#title').click(function() { $('#content_ifr').contents().find('body').css('background-color', '#f33'); }); 

我已经详尽地搜索了jQuery和iFrames这个主题，看起来根据具体情况来看，这是一个打击或错过。 有些代码适用于某些人，而不适用于其他人。

有没有人知道在TinyMCE iframe主体完全加载后获取第一个代码片段的方法？ 因为它只是WordPress内容编辑器，所以iframe内容位于同一个域中。

我真正想做的是通过.addClass（）向iframe中的body元素添加一个类

 jQuery(document).ready(function($) { $('#content_ifr').ready(function() { $('#content_ifr').contents().find('body').addClass('ui-droppable'); }); 

这样我就可以在以下教程中应用drag n’drop代码：

jQuery Example: Inserting text with drag n’ drop

Answer 1

你可以使用tiny_mce_before_init钩子在tinymce.init之前向body添加一个类

 function my_tiny_mce_before_init( $init_array ) { $init_array['body_class'] = 'some-class some-other-class'; return $init_array; } add_filter('tiny_mce_before_init', 'my_tiny_mce_before_init'); 

Answer 2

经过更多的挖掘，似乎问题是WordPress与TinyMCE交互的方式。 kovshenin在以下主题中的post对此有所了解： 更改textarea值不起作用为了操作WordPress内容，我需要使用隐藏的textarea而不是iframe内容本身。

Answer 3

看看你的tinymce配置。 您需要的只是使用“setup”设置并在那里设置onInit-Handler。 这是一个例子：

 tinyMCE.init({ ... setup : function(ed) { ed.onInit.add(function(ed, evt) { window.console && window.console.log('Tinymce Iframe loaded!'); // do whatever you like here }); } }); 

Answer 4

我使用此函数来访问或设置Wordpess中的iframe（在tinymce内部）：将此脚本添加到wordpress仪表板脚本中，并在加载TINYMCE iframe时检测，然后对其执行操作。

 add_action('admin_head', 'my_tinymce_styler',99,99); function my_tinymce_styler() { ?>