CKEditor是一个流行的WYSIWYG（所见即所得）编辑器，常用于富文本编辑和内容管理系统。在前端开发中使用CKEditor可以使得用户更加直观地编辑和预览内容。然而，在某些情况下我们需要在前端代码中访问CKEditor生成的HTML字符串，以便进行进一步的处理和操作。
获取格式化的HTML
在CKEditor中，编辑器中的HTML表示为内部数据结构，它通常不会与外部世界共享。但是，我们可以通过以下方式将其转换为格式化的HTML字符串：
const editorData = editor.getData(); // 获取编辑器中的数据 const parser = new DOMParser(); const dom = parser.parseFromString(editorData, 'text/html'); // 解析为DOM对象 const formattedHtml = dom.documentElement.outerHTML; // 获取格式化的HTML字符串
上述代码首先获取了编辑器中的数据，然后将其作为HTML文本解析为DOM对象，并使用outerHTML属性获取格式化的HTML字符串。
深入理解
要深入理解上述代码，我们需要了解以下两个概念：DOM和outerHTML。
Document Object Model（DOM）
Document Object Model（简称DOM）是一种用于HTML和XML文档的对象表示方法。浏览器将HTML或XML文档解析为一个树形结构，其中每个元素都成为文档的一个节点。将HTML或XML文档解析为DOM对象后，我们可以使用JavaScript来访问和操作文档中的元素和属性。在上述示例代码中，我们使用了DOMParser对象将HTML字符串解析为DOM对象。
outerHTML
outerHTML是一个只读属性，返回表示元素及其所有后代的HTML代码的字符串。它不仅包含元素本身的HTML标记，还包括元素的子元素以及它们的标记。在上述代码中，我们将编辑器返回的DOM对象的outerHTML属性作为格式化的HTML字符串进行输出。
指导意义
通过学习如何获取CKEditor生成的格式化HTML字符串，我们可以更好地处理和操作这些数据，并在前端应用程序中实现更复杂的功能。例如，我们可能需要将编辑器中的内容存储到数据库中，或者将其发送到服务器以实现协作编辑。此外，我们也可以利用这种方法将编辑器中的内容转换为PDF、Word等其他格式的文档。
示例代码
以下是获取CKEditor生成的格式化HTML字符串的完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- --------- ---- ---- ----------------
------- ----------------------------------------------------------------
-------
------
--------- ---------------- -- --- ------- -- -- ------------------
------- --------------------------------- --------- -------------
---- ------------------
--------
-------- ------------------- -
----- ---------- - ------------------------------------ -- ---------
----- ------ - --- ------------
----- --- - ---------------------------------- ------------- -- --------
----- ------------- - ------------------------------ -- -------------
------------------------------------------- - --------------
-
---------------------------
---------
-------
-------上述代码使用了CDN引入了CKEditor，并创建了一个简单的编辑器。当用户单击按钮时，上述showFormattedHtml()函数将获取编辑器中的数据并输出为格式化的HTML字符串。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30595