从 JQuery 中的 CK 编辑器文本区域获取文本

Question

我正在应用程序中使用 CK 编辑器。

<textarea name="contentDetails" id="contentDetails" rows="10" cols="80"></textarea>

但我无法从该文本区域检索文本。我试过了-

 var content= $("#contentDetails").text(); //and also .val() & .html()

但是 content 变量仍然是空的。

有什么想法吗？

//UPDATE - add my codes below
<script>
CKEDITOR.replace('contentDetails');

$(function () {
    $("#submitcontent").click(function (e) {
        e.preventDefault();
       var content= $("#contentDetails").text();           
    });
});

</script>

Answer 1

根据官方文档：CKEditor Dom Element

尝试

textarea = document.getElementById('contentDetails');
textareaNode = new CKEDITOR.dom.element(textarea);
textareaNode.getValue();

Answer 2

Ckeditor 将用它自己的元素替换您的文本区域，这就是您需要从中获取 html 的地方。如果您检查原始文本区域，您会发现它是空的，内容实际上是编辑器生成的一堆 html 中的其他地方。尝试使用 inspect element 为包含您可以使用的内容的元素查找选择器。确保您的 jQuery 在编辑器初始化后执行。

Answer 3

使用：

var text = CKEDITOR.instances.contentDetails.getData();

Answer 4

官方CKEditor jQuery adapter guide解释：

// Get the editor data.
var data = $( 'textarea.editor' ).val();
// Set the editor data.
$( 'textarea.editor' ).val( 'My new content' );

Answer 5

这里还有一个例子（基于CKEditor5）：

let theEditor;

ClassicEditor
  .create(document.querySelector('#contentDetails'))
  .then(editor => {
    theEditor = editor;

  })
  .catch(error => {
    console.error(error);
  });


function getDataFromTheEditor() {
  return theEditor.getData();
}

document.getElementById('getdata').addEventListener('click', () => {
  alert(getDataFromTheEditor());
});

<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>
<textarea name="contentDetails" id="contentDetails" rows="10" cols="80">
<p>Here goes the initial content of the editor.</p>
</textarea>
<button id="getdata">Print data</button>

从 JQuery 中的 CK 编辑器文本区域获取文本

Get text from CK Editor textarea in JQuery

jquery

ckeditor