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

ckeditor get value

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 por eso?

Answer 1

Ahora que existe el adaptador jQuery , esta respuesta debe actualizarse:

Supongamos que inició el editor con $(''.ckeditor'').ckeditor(opt) luego obtiene el valor con $(''.ckeditor'').val()

Answer 2

Creo que será mejor, solo serialice su formulario por jquery y vítores ...

<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 la sección javascript

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 3

En primer lugar, debe incluir el script ckeditor y jquery connector en su página,

luego crea un área de texto

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

adjuntar ckeditor al área de texto, en mi proyecto uso 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'' } );

al enviar, obtenga el contenido usando:

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

¡Eso es! :)

Answer 4

Estaba teniendo problemas con el getData() no funcionaba siempre, especialmente cuando se trata de live ajax.

Pudo sortearlo ejecutando:

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

Luego use jquery para obtener el valor del área de texto.

Answer 5

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 6

Si no mantiene una referencia al editor, como en la respuesta de Aeon, también puede usar el formulario:

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

Answer 7

Una forma fácil de obtener el texto dentro del editor o la longitud del mismo :)

 var editorText = CKEDITOR.instances[''<%= your_editor.ClientID %>''].getData();
alert(editorText);
var editorTextLength = CKEDITOR.instances[''<%= your_editor.ClientID %>''].getData().length;
alert(editorTextLength);

Answer 8

puedes recuperar datos como este:

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

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

Answer 9

utilice 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 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 10

versión 4.6

CKEDITOR.instances.editor.getData()

Answer 11

agrego ckEditor agregando DLL en toolbox.
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 datos de eso.
jquery:

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

Answer 12

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

Reemplace YourInstanceName con el nombre de su instancia y obtendrá los resultados deseados.