plugin CKEditor, retrouver et insérer des données avec jQuery [Résolu]

[aa1807]

Bonjour chers informaticiens,

Voilà, j'ai un souci que je n'arrive pas à résoudre depuis plus de 10 heures de boulot! Il s'agit en fait d'un textarea avec CKeditor (en non FCKeditor, l'API est différente) que j'aimerai afficher dans un div en bas de la même page (En gros un bouton visualiser avant d'envoyer!). Sauf que ça ne marche pas!

A savoir, lorsque je désactive le CKeditor, le texte s'affiche super bien, donc le problème est vraiment lié au CKeditor.

Voici les bouts de codes liés à ce problème:
En haut de mon fichier php j'ai le code suivant qui permet d'inclure les fichiers js.

Code :

1
2
3
4
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>

Le ckeditor.js est le fichier js du CKeditor et le jquery.js est la librairie jQuery pour CKeditor.

Jusqu'à là tout va bien...

Voici le code de la fonction javascript en question qui suit les includes(lire les commentaires dans le code).

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
function viewNewsletter(textareaId, titleId, viewDiv){
        var title_mail = encodeURIComponent(document.getElementById(titleId).value);
        //*************le titre (au dessus) s'affiche correctement car c'est un champ texte normal
        //************* VOICI TOUT CE QUE J'AI ESSAYE'
        //var contentLetter = CKEDITOR.instances.getCustomData(textarea);
        //var contentLetter = CKEDITOR.instances.getHTML(textarea);
        //var contentLetter = CKEDITOR.instances.getHtml(textarea);
        //var contentLetter = CKEDITOR.instances.getxhtml(textarea);
        //var contentLetter = CKEDITOR.textarea.GetData();
        //var contentLetter = encodeURIComponent(document.getElementById(textareaId).value);
        //var contentLetter = document.getElementById("textarea").value;
        //CKEDITOR.htmlParser.element("textarea")
 
        //var contentLetter = $('textarea').ckeditor().getData();
        //var contentLetter =  CKEDITOR.textarea.GetData();
 
        // Get editor object
        //var editor = $('#textarea').ckeditorGet();
        //alert( editor.checkDirty() );
        // Get the editor data.
        //var contentLetter = $('editor').val();
 
        //var contentLetter =  $('#textarea').ckEditorGet().Preview();
 
        var editor = CKEDITOR.editor.replace('textarea');
        var contentLetter = editor.getData();
 
        alert(contentLetter);
        //************** AUCUNE NE FONCTIONNE !!!
 
... etc
}

Et enfin mon formulaire.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<form>
<div style="clear: both;">
	<textarea class="ckeditor" id='textarea' name='texte_rub' cols='103' rows='10'></textarea>
    </div>
 
    <input type='button' value='Visualiser' onclick="viewNewsletter('textarea', 'title', 'viewDiv');" />
	<input type='submit' value='Valider' />
    <div id='viewDiv'>
    // là où la preview devrait s'afficher
    </div>
    </form>

Voilà,

Je vous remercie d'avance de votre aide

[danielhagnoul]

Bonjour

Je n'utilise pas et donc je ne connais pas le plugin. Mais un rapide coup d'oeil sur la documentation et l'on trouve la page "jQuery Adapter" et il y a un chapitre : "Code Interaction with Editor Instances"

Et pour retrouver et insérer des données :

Code :

1
2
3
4
// Get the editor data.
var data = $( 'textarea.editor' ).val();
// Set the editor data.
$( 'textarea.editor' ).val( 'my new content' );

Source : http://docs.cksource.com/CKEditor_3....jQuery_Adapter

[aa1807]

Merci pour ta réponse Daniel, mais cette solution ne fonctionne pas, si tu regarde le code que j'ai mis dans mon premier post tu verras que c'est ce que j'ai essayé auparavant. Ainsi que ce qui m'intéresse là c'est de faire un get.

En fait quand j'éxecute le script j'ai le message suivant:

$('xxxxx').xxx is not a fonction
xxx est à remplacer par tous les fonctions que nous avons cité!

[aa1807]

Finalement ça marche avec la ligne suivante:

Code :

var content =  CKEDITOR.instances.textareaX.getData();

textareaX est l'ID du textarea dans le formulaire.

Merci de ta réponse tout de même!