yui_editor не загружается при загрузке части через вызов ajax - PullRequest
Новая
       15

yui_editor не загружается при загрузке части через вызов ajax

0 голосов
/ 19 августа 2010

В приложении Rails я загружаю партиал с помощью вызова ajax. (все еще использую прототип)

Партиал - это форма, которая содержит текстовую область, обогащенную yahoo yui_editor (аналогично tinyMCE или FCKEditor) 

<%= f.text_area :body, :class => 'rich_text_editor',  :rows => "15", :style => "width : 90%;"  %>

Редактор yui_editor не загружен, а содержимое текстовой области отображается в виде простого текста, когда форма загружается с помощью вызова ajax.

Я проверял, что yui_editor активен, когда тот же фрагмент загружен напрямую без каких-либо вызовов ajax.

Я знаю, что это связано с тем, что jui-редактор yui_editor не загружен, но я не знаю, как решить эту проблему

Ваша помощь будет очень признательна

Спасибо

1 Ответ

1 голос
/ 25 августа 2010

Вам нужно запустить редактор YUI. Поскольку редактору нужен идентификатор элемента, вам необходимо указать уникальный идентификатор в вашем партиале.

Подробнее о параметрах редактора см. YUI doc

Добавлена ​​

Вы добавляете div через Ajax? В этом случае вам нужно вызвать библиотеку YUI-редактора после добавления div. Два способа сделать это:

1) Ваш код, который выполняет вставку в dom (с результатами вызова Ajax), должен явно вызывать редактор YUI. Например, ваши результаты Ajax могут включать идентификатор элемента текстовой области, вы уже могли знать его заранее и т. Д.

2) Вы можете включить скрипт для вызова редактора YUI в ваши результаты Ajax. Но тогда вам нужно будет запустить скрипт (ы) в html после того, как вы добавите их в dom.

Установка свойства innerHTML для элемента НЕ запускает никаких сценариев в html. Но у меня есть сценарий, который есть, см. Ниже.

Сценарий основан на этом SO Вопрос 

... do ajax call and get results in <body>
foo_el.innerHTML = body; // add results to the dom

exec_body_scripts(foo_el); // run any scripts in foo_el

//////////////////////////////////

function exec_body_scripts(body_el) {
  // Finds and executes scripts in the dialog's body.
  // Needed since innerHTML does not run scripts.
  // NB: Only looks for scripts that are children or grandchildren of body_el.
  // Doesn't look deeper.  

  function evalScript(elem) {
    var data = (elem.text || elem.textContent || elem.innerHTML || "" ),
        head = document.getElementsByTagName("head")[0] ||
               document.documentElement,
        script = document.createElement("script");

    script.type = "text/javascript";
    try {
      script.appendChild(document.createTextNode(data)); // doesn't work on ie
    } catch(e) {
      // IE has funky script nodes
      script.text = data;
    }

    head.insertBefore(script, head.firstChild);
    head.removeChild(script);
  };

  // main section of function
  var scripts = body_el.getElementsByTagName('SCRIPT'), i;

  for (i = 0; scripts[i]; i++) {
    evalScript(scripts[i]);
  }
};

Частичный пример: 

<% el_id = "rte_#{foo.id}"
# foo is the name of an object used by the partial. Using its id
# to ensure a unique id for the element on the page.
# Or use a simple counter "i". But in any case, the el_id must be unique
%>
<%= f.text_area :body, :class => 'rich_text_editor',  :rows => "15", 
    :style => "width : 90%;", :id => el_id  %>

<script>
  (function() {
    var myEditor = new YAHOO.widget.Editor('<%= el_id %>', {
      height: '300px',
      width: '522px',
      dompath: true, //Turns on the bar at the bottom
      animate: true //Animates the opening, closing and moving of Editor windows
      });
    myEditor.render();
  })();    
</script>
...