¿Cómo puedo obtener contenido de CKEditor usando JQuery?

Question

Estoy usando CKEditor. Estoy guardando los valores de formulario con ajax usando métodos de página.

Pero el contenido del valor de CKEditor no se puede guardar en la tabla.

No devuelvo la página.

¿Qué puedo hacer para eso?

Answer 1

En primer lugar usted debe incluir CKEditor y el guión conector jQuery en su página,

continuación, crear un área de texto

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

adjuntar CKEditor al área de texto, en mi proyecto utilizo algo como esto:

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

en enviar conseguir el contenido usando:

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

Eso es todo! :)

Answer 2

utiliza la llamada CKEditor.editor.getData() en la instancia. Es decir:

HTML

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

---

JS para CKEditor 4.0.x

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

JS para 3.6.x CKEditor

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

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

Answer 3

Si no' Mantenga una referencia al editor, como en la respuesta de Aeon, también puede SE la forma:

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

Answer 4

i añadir CKEditor mediante la adición de DLL en caja de herramientas. código
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> 

para obtener los datos de la misma.
jQuery:

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

Answer 5

que estaba teniendo problemas con el getData() no trabajar cada vez sobre todo cuando se trata de Ajax en vivo.

fue capaz de conseguir alrededor de él mediante la ejecución:

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

Entonces usar jQuery para obtener el valor del área de texto.

Answer 6

Gracias a John Magnolia. Esta es mi función postformulario que estoy usando en mis proyectos de Symfony y ahora está bien trabajar 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); 

Reemplazar YourInstanceName con el nombre de la instancia y obtendrá los resultados deseados.

Answer 8

Creo que va a ser mejor, justo serializar su formulario por jQuery y alegre ...

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

y en JavaScript sección

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

Ahora que existe jQuery adapter, esta respuesta necesita ser actualizado:

Digamos que usted inició el editor con $('.ckeditor').ckeditor(opt) continuación, se obtiene el valor con $('.ckeditor').val()

Answer 10

versión 4.6

CKEDITOR.instances.editor.getData() 

Answer 11

que seguir para recuperar datos como estos:

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

referencia: http://docs.ckeditor.com/#!/guide/dev_savedata