如何使用jQuery获取ckeditor文本框的值？

Question

我在文本区域中使用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;

- Manish Tiwari

---

var value = CKEDITOR.instances['DSC'].getData() 用于从ckeditor文本区域获取值 - Vinoth Narayan

Answer 1

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

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

或者：

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

- Bogdan Kuštan

---

天啊，谢谢！！我花了好几个小时才找到这个XD - Keutelvocht

当我使用这些语法时，出现了“f未定义”的错误，有人遇到过这个问题并且有可能的解决方案吗？ - Jass

对于使用 ckeditor 5 的所有人，您可以在此处找到答案：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html。它说您需要将创建的编辑器实例保存在单独的变量中，并从那里使用它。 - BogdanG

对于那些可能感兴趣的人，我对CKEditor 5的此解决方案进行了快速更新（在2022年4月进行了测试），因为自此答案发布以来，该过程有了一些变化：https://dev59.com/s1oU5IYBdhLWcg3wg3So - Edouard

Answer 2

在textarea中使用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();

- Palash

Answer 3

alert(CKEDITOR.instances.DSC.getData());

- Muhammad Awais

Answer 4

使用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>

- gaetanoM

Answer 5

以下是过去的文本区域 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>

I got value of text area like this

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

- Tayyeb

Answer 6

关于使用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();
     });
}

这篇文章也是我以后的提醒。

- Edouard

Answer 7

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

- Rahul Baruri

Answer 8

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

- Tarun Yaduvanshi

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

- Albert Agoya