在前端开发过程中，我们常常需要获取页面上各种表单元素（input、textarea等）的值。对于普通的 textarea，获取值非常简单，只需要使用 element.value 即可。但对于使用了富文本编辑器 CKEditor 的 textarea，获取其值则稍有不同。
CKEditor 简介
CKEditor 是一款功能强大的富文本编辑器，支持丰富的文字排版和格式设置，如字体、颜色、加粗、斜体等。它是一个开源项目，由多个插件组成，可以通过自定义配置来满足各种需求。
获取 CKEditor Textarea 值的方法
CKEditor 的实现方式是将一个经过初始化后的 textarea 替换成一个带有富文本编辑功能的div，所以不能直接通过 element.value 来获取 CKEditor textarea 中的值。但是，CKEditor 提供了 API，可以使用以下两种方式来获取其值：
方法一：使用 editor.getData()
CKEditor 会在 textarea 上挂载一个 ckeditor 对象，其中包含编辑器的实例。因此，我们可以通过以下代码来获取 textarea 的值：
--- ---------- - ------------------------------------------
其中，textareaName 是 textarea 元素的 name 属性值。这个方法返回的是一个 HTML 字符串，包含了编辑器中所有的文本内容和样式信息。
方法二：使用 textarea 元素的 value 属性
如果你只需要获取编辑器中的纯文本值，也可以通过 textarea 元素的 value 属性来获取。这个方法并不是 CKEditor 官方提供的 API，但是实际运用时比较方便。
--- ---------- - --------------------------------------------------------------
示例代码
下面是一个完整的示例代码，展示如何获取 CKEditor Textarea 的值：
HTML 代码：
--------- -------------- ------------------------ ------- ----------------------------------------
JavaScript 代码：
-------- ---------------- - -- -- -------- -- --- ------ - --------------------------- -- --------- --- ---- - ----------------- -- -------- ------------------ -
结语
本文介绍了如何使用 JavaScript 来获取 CKEditor Textarea 中的值，同时也讲解了 CKEditor 的基本概念和使用方法。希望读者能够通过本文学习到有关富文本编辑器和 JavaScript 的知识，并且在实际开发中能够灵活应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28380