Question

在Rails应用程序中，我通过ajax调用加载部分内容。（仍然使用原型）

partial是一个包含富含yahoo yui_editor的textarea的表单（类似于tinyMCE或FCKEditor）

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

当通过ajax调用加载表单时，未加载yui_editor并且textarea内容显示为简单文本。

我测试了yui_editor在没有任何ajax调用的情况下直接加载相同的部分时处于活动状态。

我知道这与yui_editor javascript未加载这个事实有关但我不知道如何解决这个问题

非常感谢您的帮助

由于

Answer 1

您需要启动YUI编辑器。由于编辑器需要元素的id，因此您需要在partial中指定唯一的id。

有关编辑器参数的更多信息，请参阅YUI doc

<强>加

您是否通过Ajax添加div？在这种情况下，您需要在添加div后调用YUI编辑器库。有两种方法可以做到：

1）插入dom的代码（带有Ajax调用的结果）需要显式调用YUI编辑器。例如，您的Ajax结果可能包含文本区域的元素ID，您可能已经提前知道了等等。

2）您可以在Ajax结果中包含用于调用YUI编辑器的脚本。但是，在将它们添加到dom之后，您需要在html中运行脚本。

设置元素的innerHTML属性不会运行html中的任何脚本。但我有一个脚本，见下文。

该脚本基于此SO Question

... 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>

通过ajax调用加载部分时未加载yui_editor

1 个答案: