Vous devez démarrer l'éditeur YUI. Puisque l'éditeur a besoin de l'identifiant de l'élément, vous devez spécifier un identifiant unique dans votre partial.
Voir la YUI doc pour en savoir plus sur les paramètres de l'éditeur
Ajouté
vous ajoutez le div via Ajax? Dans ce cas, vous devez appeler la bibliothèque de l'éditeur YUI après l'ajout de div. Deux façons de le faire:
1) Votre code qui fait l'insertion dans le dom (avec les résultats de l'appel Ajax) doit appeler explicitement l'éditeur YUI. Par exemple, vos résultats Ajax pourraient inclure l'ID d'élément de la zone de texte, vous pouvez déjà le connaître à l'avance, etc.
2) Vous pouvez inclure le script pour appeler l'éditeur YUI dans vos résultats Ajax. Mais alors vous devrez exécuter le (s) script (s) dans le html après les avoir ajoutés au dom.
La définition de la propriété innerHTML d'un élément n'exécute aucun script dans le code HTML. Mais j'ai un script qui fait, voir ci-dessous.
Le script est basé sur cette 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]);
}
};
exemple partiel:
<% 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>
Larry, grâce un million. votre exemple partiel a fait l'affaire. Cependant, je n'ai pas pu obtenir les données saisies dans l'éditeur de texte. En lisant le document YUI un peu plus loin, j'ai trouvé que vous deviez explicitement dire à l'éditeur de remettre les données au formulaire parent. Pour une raison inconnue, le simple fait de passer le paramètre handleSubmit ne fonctionnait pas. Je suis donc allé manuel avec YAHOO.util.Event.on ('somebutton', 'click', function() monEditeur.saveHTML(); var html = monEditeur.get ('élément') .valeur;}); voir: http://developer.yahoo.com/yui/editor/#getdata Une grosse épine de mon côté.Merci beaucoup –
J'utilise rjs pour charger la div, voici mon dernier code rjs pour déclencher l'éditeur et récupérer la valeur du formulaire page << "var myEditor = new YAHOO.widget.SimpleEditor ('ThisIsTheEmailForm') " page << "myEditor.render();" page << "YAHOO.util.Event.on ('SubmitSend', 'click', function() {monEditeur.saveHTML(); var html = monEditeur.get ('element'). Value;});" Où 'ThisIsTheEmailForm' est l'identifiant de la zone de texte et 'SubmitSend' est l'identifiant du bouton de soumission. –