Come posso ottenere il contenuto di CKEditor usando JQuery?

Question

Sto usando CKEditor. Sto salvando i valori del modulo con ajax usando i metodi di pagina.

Ma il contenuto del valore di CKEditor non può essere salvato nella tabella.

Non ho postback della pagina.

Cosa posso fare per quello?

Answer 1

Prima di tutto si dovrebbe includere ckeditor e sceneggiatura connettore jquery nella tua pagina,

quindi creare una textarea

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

allegare ckeditor per l'area di testo, nel mio progetto che uso qualcosa di simile:

$('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' }); 

sulla presentare ottenere il contenuto utilizzando:

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

Questo è tutto! :)

Answer 2

utilizzare la chiamata CKEditor.editor.getData() sull'istanza. Vale a dire:

HTML

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

---

JS per CKEditor 4.0.x

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

JS per 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! 
}); 

Answer 3

Se don' t tenere un riferimento al redattore, come nella risposta di Aeon, puoi anche tu se la forma:

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

Answer 4

aggiungo ckeditor aggiungendo DLL in Toolbox. Codice
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> 

per ottenere i dati di esso.
jquery:

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

Answer 5

stavo avendo problemi con il getData() non funziona ogni volta in particolare quando si tratta di Ajax in diretta.

stato in grado di ottenere intorno ad esso eseguendo:

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

Poi utilizzare jQuery per ottenere il valore del textarea.

Answer 6

Grazie a John Magnolia. Questa è la mia funzione postForm che sto usando nei miei progetti Symfony e ora funziona bene con CK Editor.

function postForm($form, callback) 
{ 
    // Get all form values 
    var values = {}; 
    var fields = {}; 

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

    $.each($form.serializeArray(), function(i, field) { 
     values[field.name] = field.value; 
    }); 

    // Throw the form values to the server! 
    $.ajax({ 
     type  : $form.attr('method'), 
     url   : $form.attr('action'), 
     data  : values, 
     success  : function(data) { 
      callback(data); 
     } 
    }); 

Answer 7

var value = CKEDITOR.instances['YourInstanceName'].getData() 
alert(value); 

Sostituire YourInstanceName con il nome dell'istanza e si ottengono i risultati desiderati.

Answer 8

Penso che sarà meglio, solo serializzare il modulo per jQuery e applausi ...

<form id="ajxForm"> 
    <!-- input elments here --> 
    <textarea id="ck-editor" name="ck-editor" required></textarea> 
    <input name="text" id="text" type="text" required> 
<form> 

e in Javascript sezione

CKEDITOR.replace('ck-editor', { 
    extraPlugins: 'sourcedialog', 
    removePlugins: 'sourcearea' 
}); 

$("form#ajxForm").submit(function(e) { 
    e.preventDefault(); 
    var data = $(this).serialize(); 
    if (data != '') { 
    $.ajax({ 
     url: 'post.php', 
     cache: false, 
     type: 'POST', 
     data: data, 
     success: function(e) { 
     setTimeout(function() { 
      alert(e); 
     }, 6500); 
     } 
    }); 
    } 
    return; 
}); 

Answer 9

Ora che jQuery adapter esiste, questa risposta deve essere aggiornato:

Supponi di aver avviato l'editor con $('.ckeditor').ckeditor(opt) Quindi si ottiene il valore con $('.ckeditor').val()

Answer 10

versione 4.6

CKEDITOR.instances.editor.getData() 

Answer 11

è possibile prelevare i dati come questo:

<script> 
var data = CKEDITOR.instances.editor1.getData(); 
// Your code to save "data", usually through Ajax. 
</script> 

di riferimento: http://docs.ckeditor.com/#!/guide/dev_savedata