如何使用 jquery 获取 ckeditor 文本区域值

Question

我在textarea上使用ckeditor，但我无法从中获取数据。

法典：

<textarea name="DSC" class="materialize-textarea"></textarea>
<script>
  CKEDITOR.replace('DSC');
  </script>

Jquery ：

var title = $('input[name=TITLE]').val();
    var desc = $('textarea[name=DSC]').text();
    var formdata = 'TITLE='+title+'&DSC='+desc;

Answer 1

不需要 jQuery CKEditor有自己的方法从转换后的文本区域获取数据：

var desc = CKEDITOR.instances['DSC'].getData();

或：

var desc = CKEDITOR.instances.DSC.getData();

Answer 2

在文本区域中使用 id 属性，并在 CKeditor 中使用该 id，而不是 textarea 的名称检查

<textarea name="textareaname" id="textarea-id"></textarea>
CKEDITOR.replace( 'textarea-id');//use id not name//
var ckValue = CKEDITOR.instances["textarea-id"].getData(); or
var ckValue = CKEDITOR.instances.textarea-id.getData();

Answer 3

alert（CKEDITOR.instances.DSC.getData（））;

Answer 4

下面的过去文本区域 ID。

 CKEDITOR.instances['Text_Area_Id_Here'].getData();

例如，我有文本区域

     <textarea class="form-control" id="Description" name="description" width="100%" height="150" ckeditor="true" maxlength="20000" ismandatory="false">
                                                
                    </textarea>

我得到了这样的文本区域的值

 var description = CKEDITOR.instances['Description'].getData();

Answer 5

使用jQuery_Adapter你可以写：

$(function () {
  $('textarea[name="DSC"]').ckeditor();
  $('#btn').on('click', function(e) {
    console.log('ckeditor content: ' + $('textarea[name="DSC"]').val());
  })
});

包含文件：

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.9/adapters/jquery.js"></script>
HTML: 
<textarea name="DSC" class="materialize-textarea"></textarea>
<button id="btn">Get text</button>

Answer 6

<form>
        <textarea name="editor1" id="editor1" rows="10" cols="80">
            This is my textarea to be replaced with CKEditor.
        </textarea>
    <button type="button" id="getDataBtn">Get Data</button>
    </form>
     <script>
            // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
         CKEDITOR.replace( 'editor1' );
           $(document).ready(function(){
                $("#getDataBtn").click(function(){
                    var editorData= CKEDITOR.instances['editor1'].getData();
                    alert(" your data is :"+editorData);
                })
           });
        </script>

Answer 7

//getting data form ckeditor in textarea.
var NodeDataSessionTextarea = {};
jQuery('.class-textarea').each(function(index, el) {
    var editor_id = jQuery(this).attr('id');
    var elevalue = jQuery(this).val();
    // Getting ckeditor instance.
    var editor = CKEDITOR.instances[editor_id];
    if (editor) {
        editor.on('key', function(e) {
        var self = this;
            setTimeout(function() {
                //store data in object with id
                NodeDataSessionTextarea[editor_id] = self.getData();
            }, 10);
        });
        editor.on('afterCommandExec', function(e) {
            var self = this;
            setTimeout(function() {
                //store data in object with id
                NodeDataSessionTextarea[editor_id] = self.getData();
          }, 10);
        });
        editor.on( 'blur', function() {
            //store data in session
            var nodedataencodetextarea = JSON.stringify(NodeDataSessionTextarea);
            sessionStorage.setItem("NodeDataSessionTextarea", nodedataencodetextarea);
        });
    }
});

//put data in ckeditor.
var editor = CKEDITOR.instances[id];
if (editor) {
    editor.setData(getTemplateData);
}

Answer 8

有关使用 CKEditor 5 的 Bogdan Kuštan 答案的更新（2022 年 5 月测试）：

editor.getData()是从编辑器获取数据的新方法。

下面是使用它的一个常见示例：在提交表单时填写隐藏字段。

import ClassicEditor from '.../src/ckeditor.js';
ClassicEditor
     .create('#editor-container')
     .then(editor => {
          persistForm(editor);
     };
    
function persistForm(editor)
{  
     document.querySelector('form').addEventListener('submit', (e) => {
          document.querySelector('.hidden-input').value = editor.getData();
     });
}

这篇文章也是以后对自己的提醒。

Answer 9

您应该使用getData()方法从 CKEDITOR 获取数据。

<textarea name="DSC" class="materialize-textarea" id="DSC"></textarea>
<script>
  CKEDITOR.replace('DSC');
  </script>
//reference the id DSC
var desc = CKEDITOR.instances['DSC'].getData();