JQuery를 사용하여 CKEditor의 콘텐츠를 입수하려면 어떻게 해야 하나요?

JQuery를 사용하여 CKEditor의 콘텐츠를 입수하려면 어떻게 해야 하나요?

나는 CKEditor를 사용하고 있다.페이지 메서드를 사용하여 폼 값을 에이잭스로 저장하고 있습니다.

그러나 CKEditor 값의 내용은 테이블에 저장할 수 없습니다.

나는 그 페이지를 포스트백하지 않는다.

어떻게 하면 좋을까요?

인스턴스에서 CKEditor.editor.getData() 콜을 사용합니다.즉, 다음과 같습니다.

HTML

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

---

JS for CKEditor 4.0.x

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

JS for 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!
});

Aeon의 답변과 같이 에디터에 대한 참조가 없는 경우 다음 양식을 사용할 수도 있습니다.

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

JavaScript 인코딩을 사용하여 데이터를 이미 인코딩한 라이브러리에 저장하지 않는 경우URIComponent 메서드는 수동으로 실행하지만 인코딩을 사용해야 합니다.송신되는 데이터를 올바르게 인코딩하기 위한 URIC 컴포넌트.

따라서 다음 작업을 수행해야 합니다.

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

상세한 것에 대하여는, https://ckeditor.com/docs/ckeditor4/latest/guide/dev_savedata.html 를 참조해 주세요.

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

교체하다YourInstanceName인스턴스 이름을 입력하면 원하는 결과를 얻을 수 있습니다.

이 문제에 대해서getData()특히 살아있는 에이잭스를 상대할 때는 매번 효과가 없습니다.

다음을 실행하여 문제를 해결할 수 있었습니다.

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

그런 다음 jquery를 사용하여 텍스트 영역에서 값을 가져옵니다.

jQuery 어댑터가 존재하므로 다음 답변을 업데이트해야 합니다.

로 에디터를 시작했다고 칩시다.$('.ckeditor').ckeditor(opt)그 가치를 얻을 수 있습니다.$('.ckeditor').val()

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

존 매그놀리아 덕분이야이것은 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 );
      }
  });

다음과 같이 데이터를 검색할 수 있습니다.

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

레퍼런스 : http://docs.ckeditor.com/ #!/guide/dev_paramata

버전 4.8.0

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

Pure Vanilla Javascript / Jquery 또는 Javascript 라이브러리 사용:

아래 텍스트 영역에 Ckeditor가 로드되어 있는 경우:

 <textarea name="editor1" id="editor1"></textarea>

그런 다음 다음과 같이 텍스트 영역 내에서 내용을 가져올 수 있습니다.

var txtNotes = document.getElementsByClassName('ck-content')[0].innerHTML;

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>

데이터를 얻을 수 있습니다.
쿼리:

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

그게 더 나을 것 같아, 그냥 농담과 환호로 네 폼을 연재해봐...

<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;
});

버전4.6

CKEDITOR.instances.editor.getData()

에디터 내부 또는 에디터의 길이를 쉽게 취득할 수 있습니다.

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

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

먼저 페이지에 ckeditor 및 jquery 커넥터 스크립트를 포함해야 합니다.

그런 다음 텍스트 영역을 만듭니다.

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

텍스트 영역에 ckeditor를 부착합니다.프로젝트에서는 다음과 같은 것을 사용합니다.

$('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' } );

제출 시 다음을 사용하여 콘텐츠를 가져옵니다.

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

바로 그거야! :)

언급URL : https://stackoverflow.com/questions/3799317/how-can-i-get-the-content-of-ckeditor-using-jquery