web-dev-qa-db-fra.com

Comment obtenir du contenu de CKEditor à l'aide de JQuery?

J'utilise CKEditor. Je sauvegarde 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 poste pas la page.

Que puis-je faire pour ça?

jqueryajaxckeditor
49
pegasus

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 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!
});
184
Aeon

Si vous ne disposez pas d'une 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();
63
jverdi
var value = CKEDITOR.instances['YourInstanceName'].getData()
 alert( value);

Remplacez YourInstanceName par le nom de votre instance et vous obtiendrez les résultats souhaités.

8
Mukaram

Je rencontrais des problèmes avec getData() qui ne fonctionnait pas à chaque fois, surtout lorsqu'il s'agissait d'ajax en direct. 

A été capable de 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. 

6
John Magnolia

Merci à John Magnolia. C’est la fonction postForm que j’utilise dans mes projets Symfony et il n’est plus nécessaire 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 );
      }
  });
2
Saman Shafigh

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

1
Walid azouzi

Maintenant que jQuery adapter existe, cette réponse doit être mise à jour:

Supposons que vous ayez lancé l'éditeur avec $('.ckeditor').ckeditor(opt) et que vous obteniez la valeur avec $('.ckeditor').val().

1
Benj

Un moyen facile d'obtenir le texte à l'intérieur de l'éditeur ou sa longueur :)

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

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

Je pense que ce sera mieux, il suffit de sérialiser votre formulaire en jquery et à la vôtre ...

<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;
});
0
Amdadol Haque

version 4.6

CKEDITOR.instances.editor.getData()
0
Sam NIE

version 4.8.0

$('textarea').data('ckeditorInstance').getData();
0
deVaz


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);
0
hamed hossani

Pour obtenir les données de ckeditor, vous devez obtenir une instance de ckeditor

Code HTML:

<textarea class="form-control" id="reply_mail_msg" name="message" rows="3" data-form-field="Message" placeholder="" autofocus="" style="display: none;"></textarea>

Javascript:

var ck_ed = CKEDITOR.instances.reply_mail_msg.getData();
0
Hemant Kumar