Comment puis-je obtenir du contenu de CKEditor en utilisant JQuery?
J'utilise CKEditor. J'enregistre les valeurs de 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 postback la page.
Que puis-je faire pour ça?
12 réponses
Tout d'abord, vous devez inclure ckeditor et jQuery connector script 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! :)
Utilisez le CKEditor.éditeur.GetData () appelle l'instance. C'est-à-dire:
HTML
<textarea id="my-editor">
<input id="send" type="button" value="Send">
JS pour CKEditor 4.0.x
$('#send').click(function() {
var value = CKEDITOR.instances['DOM-ID-HERE'].getData()
// send your ajax request with value
// profit!
});
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!
});
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();
J'avais des problèmes avec le getData()
qui ne fonctionnait pas à chaque fois, surtout lorsqu'il s'agissait d'ajax en direct.
A pu le contourner en exécutant:
for(var instanceName in CKEDITOR.instances){
CKEDITOR.instances[instanceName].updateElement();
}
Ensuite, utilisez jquery pour obtenir la valeur de la zone de texte.
var value = CKEDITOR.instances['YourInstanceName'].getData()
alert( value);
Remplacer YourInstanceName
avec le nom de votre instance et vous obtiendrez les résultats souhaités.
Merci à Jean Magnolia. C'est ma fonction postForm que j'utilise dans mes projets Symfony et il est bon maintenant de travailler avec 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 );
}
});
Maintenant que jQuery adaptateur existe, cette réponse doit être mis à jour:
Disons que vous avez lancé l'éditeur avec $('.ckeditor').ckeditor(opt)
alors vous obtenez la valeur avec $('.ckeditor').val()
Vous pouvez récupérer des données comme ceci:
<script>
var data = CKEDITOR.instances.editor1.getData();
// Your code to save "data", usually through Ajax.
</script>
Référence : http://docs.ckeditor.com/#!/guide/dev_savedata
j'ajoute ckEditor en ajoutant DLL dans la boîte à outils.
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 obtenir des données de celui-ci.
jquery:
var editor = $('textarea iframe html body').html();
alert(editor);
Je pense que ce sera mieux, il suffit de sérialiser votre formulaire par jquery et cheers...
<form id="ajxForm">
<!-- input elments here -->
<textarea id="ck-editor" name="ck-editor" required></textarea>
<input name="text" id="text" type="text" required>
<form>
Et dans la section 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;
});
Moyen Facile d'obtenir le texte à l'intérieur de l'éditeur ou de la longueur de celui-ci :)
var editorText = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData();
alert(editorText);
var editorTextLength = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData().length;
alert(editorTextLength);