访问 WordPress 的 TinyMCE iFrame答案

【问题标题】：Accessing WordPress's TinyMCE iFrame访问 WordPress 的 TinyMCE iFrame
【发布时间】：2011-09-29 22:27:14
【问题描述】：

使用 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 主体完全加载完成后触发第一个代码 sn-p 的方法？因为它只是 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/

【问题讨论】：

可能会更改 TinyMCE 代码本身`？
@HerrSerker 开始看起来是唯一的可能性：创建一个 TinyMCE 插件以通过全局变量触发事件或信号，但这会相当复杂。嗯

标签： jquery wordpress iframe tinymce draggable

【解决方案1】：

您可以在 tinymce.init 之前使用tiny_mce_before_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');

【讨论】：

【解决方案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
}

【讨论】：

【解决方案3】：

查看您的 tinymce 配置。您需要做的就是使用"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
      });
   }
});

【讨论】：