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

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

局部是包含与Yahoo yui_editor富集一个textarea（类似于tinyMCE的或FCKEditor的）形式

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

的yui_editor未加载和textarea的内容被显示为简单的当通过ajax调用加载表单时的文本。

我测试的是，当相同的部分被直接加载而不任何AJAX调用yui_editor是活动的。

我知道这已经做的事实，没有加载yui_editor JavaScript，但我不知道如何解决这个问题

您的帮助将是非常赞赏

感谢

来源

2010-08-19 Alexis Perrier

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

见YUI doc更多关于编辑器的参数

新增

你将通过Ajax的DIV？在这种情况下，您需要在div添加后调用YUI编辑器库。两种方法做到这一点：

1）你的代码确实插入到DOM（与Ajax调用的结果）需要显式调用YUI编辑器。例如，您的阿贾克斯结果可能包括文本区域的元素的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>

来源

2010-08-25 18:04:42

拉里，万分感谢。你的部分例子有诀窍。但不知何故，我无法获得在文本编辑器中输入的数据。进一步阅读YUI文档我发现你必须明确告诉编辑将数据交给父窗体。由于某些未知原因，只传递handleSubmit参数无效。所以我去手动与 YAHOO.util.Event.on（ 'somebutton'， '点击'，函数（）myEditor.saveHTML（）; VAR HTML = myEditor.get（ '元素'）值;}）; 看到：http://developer.yahoo.com/yui/editor/#getdata 一个大刺了我的身边的。非常感谢 – 2010-08-28 07:28:01

我正在使用rjs加载div，这里是我的最终rjs代码来触发编辑器并从窗体中获取值 page <<“var myEditor = new YAHOO.widget.SimpleEditor（'ThisIsTheEmailForm' ）;” page <<“myEditor.render（）;” （'SubmitSend'，'click'，function（）{myEditor.saveHTML（）; var html = myEditor.get（'element'）。value;}）;“ 其中'ThisIsTheEmailForm'是textarea的id，'SubmitSend'是提交按钮的ID – 2010-08-28 07:30:22

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

回答

相关问题