2013-05-16 3 views
1

Я очень смущен.Свойства объекта JavaScript «иногда» не определены

Я создал следующий скрипт, который находится по адресу http://tapmeister.com/test/dom.html. По неизвестной причине tinymce.editors.ta1 и tinymce.editors [0] отображаются как неопределенные, и попытка использовать метод под ними приводит к ошибке. Но когда я проверяю tinymce или tinymce.editors, используя FireBug, я вижу их в DOM.

Итак, я создаю jsfiddle http://jsfiddle.net/JWyWM/, чтобы показать людей в stackoverflow. Но когда я проверяю это, tinymce.editors.ta1 и tinymce.editors [0] больше не определены, и методы работают без ошибок.

Что происходит ??? Может быть, что-то связано с общедоступными/защищенными/частными свойствами? Как мне получить доступ к таким методам, как tinymce.editors.ta1.hide()? Спасибо!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
     <title>Testing</title> 
     <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script> 
     <script type="text/javascript"> 
      tinymce.init({selector: "textarea#ta1"}); 
      tinymce.init({selector: "textarea#ta2"}); 
      console.log(tinymce); 
      console.log(tinymce.editors); 
      console.log(tinymce.editors.ta1); 
      console.log(tinymce.editors[0]); 
      //tinymce.editors.ta1.hide(); 
      //alert('pause'); 
      //tinymce.editors.ta1.show(); 
     </script> 
    </head> 

    <body> 
     <form> 
      <textarea id="ta1"></textarea> 
      <textarea id="ta2"></textarea> 
     </form> 
    </body> 
</html> 

ответ

3

TinyMCE не делает всю работу установки сразу при вызове init. Он обеспечивает обратный вызов, setup, чтобы рассказать вам, когда работа будет выполнена.

Итак, если вы предоставили обратный вызов setup, вы можете взаимодействовать с экземпляром редактора.

Вот пример (я также переместили ваши скрипты до конца, which is best practice regardless):

Live Example | Live Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
     <title>Testing</title> 
    </head> 

    <body> 
     <form> 
      <textarea id="ta1"></textarea> 
      <textarea id="ta2"></textarea> 
     </form> 
     <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script> 
     <script type="text/javascript"> 
      tinymce.init({ 
       selector: "#ta1, #ta2", 
       setup: function(e) { 
        console.log("Editor " + e.id + " is ready"); 
       } 
      }); 
     </script> 
    </body> 
</html> 

Теперь, если вы действительно хотите получить доступ к экземпляру редактора, причудливо TinyMCE не добавляет его в tinymce.editors до после вызова функции setup. Но если вы бросите короткую доходность, вы все настроены. Вот вышесказанное с измененной функцией setup:

Live Copy | Live Source

setup: function(e) { 
    // Bizarrely, TinyMCE calls `setup` *before* adding 
    // the relevant editor to `tinymce.editors`, 
    // so we have to yield briefly 
    console.log("Editor " + e.id + " is ready"); 
    if (e.id === "ta2") { 
    console.log("It's ta2, I'll hide it in a moment."); 
    setTimeout(function() { 
     tinymce.editors[e.id].hide(); 
    }, 0); 
    } 
} 

Так почему же он работает на jsFiddle? Ну, у jsFiddle есть действительно мертвый мозгудивительный параметр по умолчанию, который должен поставить весь ваш скрипт в функцию обратного вызова window#load. window#load происходит очень в конце процесса загрузки, после загрузки всех внешних ресурсов. (Вы можете видеть, что в пользовательском интерфейсе jsFiddle это второй раскрывающийся список слева.) Таким образом, очевидно, что TinyMCE был полностью готов в тот момент, где он не был ранее в цикле.

Сторона примечания: 99,9% времени, нет абсолютно никакого смысла в предоставлении имени тега с помощью селектора id, например. textarea#ta1. Значения id уникальны, поэтому вам не нужно их квалифицировать, если вы явно не хотите сопоставлять элемент, который может иногда иметь одно имя тега, или другое время - другое, что является довольно необычным вариантом использования.

+0

Я пересмотрел код, как вы предлагали, и результаты не отличаются. Взгляните на http://tapmeister.com/test/dom.html. Спасибо – user1032531

+0

@ user1032531: Нет, не просите людей посещать случайные сайты, чтобы помочь вам. Мы не берем эти вещи за пределы площадки. (Почему: meta.stackoverflow.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question) Я, однако, понял, в чем проблема , См. Обновленный ответ. –

+0

Простите, TJ, я больше не буду этого делать. Я предприму шаги, чтобы научиться пользоваться http://jsbin.com. Кроме того, я согласен с бесполезностью 'textarea # ta1'. Это было на самом деле в примере TinyMCE. Спасибо, что показали мне, что я могу использовать 'selector: # # ta1, # ta2" '. Наконец, я не думаю, что пересмотренное решение работает. Мне нужно иметь доступ к редакторам, таким как 'tinymce.editors.ta1.hide()'. Я создам образец на http://jsbin.com и опубликую его. Благодарим за помощь. – user1032531

-1

Существует большой шанс, что ваш скрипт работает до того, как tinyMCE загрузится. Это может быть так, что он быстрее загружается с вашего тестового сайта, поэтому он работает.

Использовать как быструю проверку.

Смежные вопросы