Доступ к WordPress TinyMCE iFrame - PullRequest
Новая
       15

Доступ к WordPress TinyMCE iFrame

1 голос
/ 30 сентября 2011

Используя jQuery, я пытаюсь манипулировать редактором контента WordPress, который использует TinyMCE внутри iframe.Кажется, я не могу заставить следующий код работать должным образом: 

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

Независимо от того, использую ли я ".ready ()" или ".load ()", событие будет запущено до TinyMCEРедактор (тело iframe) полностью завершил загрузку.

Тем не менее, следующий код будет работать, если я буду ждать загрузки iframe перед тем, как вручную щелкнуть текстовое поле заголовка для запуска события click: 

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

Я провел исчерпывающий поиск по jQuery и iFrames, и кажется, что это хит или промах в зависимости от ситуации.Некоторый код работает для некоторых людей, а не для других.

Кто-нибудь знает способ заставить первый фрагмент кода сработать после полной загрузки тела iframe TinyMCE?Поскольку это просто редактор содержимого WordPress, содержимое iframe находится в том же домене.

Что я действительно хочу сделать, так это добавить класс к элементу body в iframe с помощью .addClass () 

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 ]

5 голосов
/ 03 ноября 2011

Вы можете использовать хук 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');
2 голосов
/ 23 июля 2014

Я использую эту функцию для доступа или стиля iframe (внутри tinymce) в Wordpess: этот сценарий добавляется в сценарии панели инструментов WordPress и обнаруживает, когда загружается iframe TINYMCE, а затем действия с ним. 

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
}
1 голос
/ 30 сентября 2011

Посмотрите на вашу конфигурацию 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
      });
   }
});
1 голос
/ 30 сентября 2011

После дальнейших копаний, похоже, проблема в том, как WordPress взаимодействует с TinyMCE.Пост kovshenin в следующей теме пролил некоторый свет на это: изменение значения textarea не работает Чтобы манипулировать контентом WordPress, мне нужно работать со скрытым textarea, а не с самим контентом iframe.

...