Question

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

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

但是我无法从该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

试试这个：

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

Answer 2

官方CKEditor jQuery adapter guide解释说：

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

Answer 3

以下是另一个示例（基于 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>

Answer 4

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

Answer 5

根据官方文件：CKEditor Dom Element

尝试

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

从JQuery中的CK Editor textarea获取文本

5 个答案: