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?

47
demandé sur pegasus 2010-09-26 22:57:21

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! :)

-20
répondu Mike 2010-09-26 19:17:43

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!
});
181
répondu Aeon 2017-02-09 08:48:42

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();
62
répondu jverdi 2011-12-19 18:51:34

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.

6
répondu John Magnolia 2014-01-14 11:03:30
var value = CKEDITOR.instances['YourInstanceName'].getData()
 alert( value);

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

6
répondu Mukaram 2015-01-03 16:12:37

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 );
      }
  });
2
répondu Saman Shafigh 2014-11-04 05:36:10

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()

1
répondu Benj 2015-10-09 05:51:02

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
répondu Walid azouzi 2017-06-07 08:09:27


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
répondu hamed hossani 2012-12-05 10:38:21

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;
});
0
répondu Amdadol Haque 2015-06-03 08:08:02

Version 4.6

CKEDITOR.instances.editor.getData()
0
répondu Sam NIE 2017-02-09 05:58:08

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);
0
répondu Static Void 2018-06-13 17:45:11