web-dev-qa-db-ja.com

JQueryを使用してCKEditorのコンテンツを取得するにはどうすればよいですか？

CKEditorを使用しています。ページメソッドを使用してajaxでフォームの値を保存しています。

ただし、CKEditor値の内容はテーブルに保存できません。

ページをポストバックしません。

そのために何ができますか？

jqueryajaxckeditor
53
pegasus

インスタンスで CKEditor.editor.getData（） 呼び出しを使用します。それは言うことです：

HTML

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

CKEditor 4.0.xのJS

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

CKEditor 3.6.xのJS

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

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

Aeonの答えのように、エディターへの参照を保持していない場合は、次の形式も使用できます。

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

YourInstanceNameをインスタンスの名前に置き換えると、目的の結果が得られます。

8
Mukaram

特にライブajaxを扱う場合、getData()が毎回機能しないという問題がありました。

次を実行することで回避できました：

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

次に、jqueryを使用してtextareaから値を取得します。

6
John Magnolia

ジョン・マグノリアに感謝します。これは、Symfonyプロジェクトで使用しているpostForm関数であり、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

次のようなデータを取得できます。

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

参照： http://docs.ckeditor.com/#!/guide/dev_savedata

1
Walid azouzi

jQuery adapter が存在するため、この回答を更新する必要があります。

$('.ckeditor').ckeditor(opt)でエディターを開始したとすると、$('.ckeditor').val()で値を取得します

1
Benj

Jqueryと歓声でフォームをシリアル化するだけで良いと思います...

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

および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

版 4.6

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

バージョン4.8.0

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

エディター内のテキストまたはその長さを取得する簡単な方法:)

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

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


i toolBoxにDLL）を追加してckEditorを追加します。
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>

データを取得します。
jquery：

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

Ckeditorのデータを取得するには、ckeditorインスタンスを取得する必要があります

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