访问WordPress的TinyMCE iFrame

时间:2011-09-29 22:27:14

标签: jquery wordpress iframe tinymce draggable

使用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的主体)完全加载之前触发。

但是,如果我在手动点击标题文本框以触发点击事件之前等待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');
});

以便我可以在以下教程中应用拖放代码:

http://skfox.com/2008/11/26/jquery-example-inserting-text-with-drag-n-drop/

4 个答案:

答案 0 :(得分:5)

你可以使用tiny_mce_before_init钩子在tinymce.init

之前向身体添加一个类
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');

答案 1 :(得分:2)

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

add_action('admin_head', 'my_tinymce_styler',99,99);
function my_tinymce_styler()
{
    ?>
    <script>
    function myExec() 
    {
        var theFrame = document.getElementsByTagName("iframe")[0];
        if (!theFrame) { window.setTimeout(myExec, 1000);  }
        else
        {
            var theFrameDocument = theFrame.contentDocument || theFrame.contentWindow.document;
            theFrameDocument.body.innerHTML += '<?php echo json_encode('
                <style>
                    .parentt{
                    border:5px solid red !important;
                    }
                </style>');?>';
        }
    };
    window.onload = myExec;
    </script>
    <?php
}

答案 2 :(得分:1)

经过多次挖掘,问题似乎是WordPress与TinyMCE交互的方式。 kovshenin在以下主题中的帖子对此有所了解: change textarea value doesn't work 为了操作WordPress内容,我需要使用隐藏的textarea而不是iframe内容本身。

答案 3 :(得分:1)

看看你的配置。您需要的只是使用"setup"-setting并在那里设置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
      });
   }
});