用JQuery从CK Editor文本区域获取文本

Question

我在一个应用中使用CK Editor。

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

- s.k.paul

---

尝试使用.val()而不是.text()。 - Deryck

你是在什么时候调用拥有 content 变量的函数？是在文本区域被填充之后吗？ - sideroxylon

该内容是在事件处理程序内定义还是在代码的其他位置定义的？ - Deryck

Answer 1

使用：

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

- Irfan TahirKheli

Answer 2

这里有一个基于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>

- Penny Liu

Answer 3

官方 CKEditor jQuery 适配器指南解释道：

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

- oleq

Answer 4

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

- Benjamin Thvedt

Answer 5

根据官方文档：CKEditor Dom Element。

尝试。

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

- Shreejibawa