Comment puis-je obtenir le contenu de CKEditor à l'aide de JQuery?

Question

J'utilise CKEditor. J'enregistre les valeurs du formulaire avec ajax en utilisant des méthodes de page.

Mais le contenu de la valeur CKEditor ne peut pas être enregistré dans la table.

Je ne publie pas la page.

Que puis-je faire pour ça?

Answer 1

utilisez l'appel CKEditor.editor.getData () sur l'instance. C'est-à-dire:

HTML

 <textarea id="my-editor">
<input id="send" type="button" value="Send">
 

---

JS pour CKEditor 3.6.x

 var editor = CKEDITOR.editor.replace('my-editor');

$('#send').click(function() {
    var value = editor.getData();
    // send your ajax request with value
    // profit!
});
 

JS pour CKEditor 4.0.x

 $('#send').click(function() {
    var value = CKEDITOR.instances['DOM-ID-HERE'].getData()
    // send your ajax request with value
    // profit!
});
 

Answer 2

Si vous ne possédez pas de référence à l'éditeur, comme dans la réponse d'Aeon, vous pouvez également utiliser le formulaire:

 var value = CKEDITOR.instances['my-editor'].getData();
 

Answer 3

J'avais des problèmes avec le getData() ne fonctionnait pas à chaque fois, surtout quand il s'agissait de ajax en direct.

A pu contourner ce problème en exécutant:

 for(var instanceName in CKEDITOR.instances){
    CKEDITOR.instances[instanceName].updateElement();
}
 

Utilisez ensuite jquery pour obtenir la valeur de la zone de texte.

Answer 4

j'ajoute ckEditor en ajoutant DLL dans toolBox.
Code HTML:

 <CKEditor:CKEditorControl ID="editor1" runat="server" 
            BasePath="ckeditor" ContentsCss="ckeditor/contents.css" 
            Height="250px" 
            TemplatesFiles="ckeditor/themes/default/theme.js" FilebrowserBrowseUrl="ckeditor/plugins/FileManager/index.html" 
            FilebrowserFlashBrowseUrl="ckeditor/plugins/FileManager/index.html" FilebrowserFlashUploadUrl="ckeditor/plugins/FileManager/index.html" 
            FilebrowserImageBrowseLinkUrl="ckeditor/plugins/FileManager/index.html" FilebrowserImageBrowseUrl="ckeditor/plugins/FileManager/index.html" 
            FilebrowserImageUploadUrl="ckeditor/plugins/FileManager/index.html" 
            FilebrowserUploadUrl="ckeditor/plugins/FileManager/index.html" BackColor="#FF0066" 
                    DialogButtonsOrder="Rtl" 
                    FontNames="B Yekan;B Yekan,tahoma;Arial/Arial, Helvetica, sans-serif; Comic Sans MS/Comic Sans MS, cursive; Courier New/Courier New, Courier, monospace; Georgia/Georgia, serif; Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif; Tahoma/Tahoma, Geneva, sans-serif; Times New Roman/Times New Roman, Times, serif; Trebuchet MS/Trebuchet MS, Helvetica, sans-serif; Verdana/Verdana, Geneva, sans-serif" 
                    ResizeDir="Vertical" ResizeMinHeight="350" UIColor="#CACACA">dhd fdh</CKEditor:CKEditorControl>
 

pour en obtenir des données.
jquery:

 var editor  = $('textarea iframe html body').html();
    alert(editor); 
 

Answer 5

Tout d'abord, vous devez inclure le script de connecteur ckeditor et jquery dans votre page,

puis créez une zone de texte

 <textarea name="content" class="editor" id="ms_editor"></textarea>
 

attachez ckeditor à la zone de texte, dans mon projet j'utilise quelque chose comme ceci:

 $('textarea.editor').ckeditor(function() {
        }, { toolbar : [
            ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
            ['Undo','Redo'],
            ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
            ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
            ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
            ['Link','Unlink','Anchor', 'Image', 'Smiley'],
            ['Table','HorizontalRule','SpecialChar'],
            ['Styles','BGColor']
        ], toolbarCanCollapse:false, height: '300px', scayt_sLang: 'pt_PT', uiColor : '#EBEBEB' } );
 

sur soumettre obtenir le contenu en utilisant:

 var content = $( 'textarea.editor' ).val();
 

C'est ça! :)