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調用加載部分時未加載

回答

相關問題