获取 CKEditor 的 HTML 内容

Created: November-22, 2018

使用以下内容创建文件 ckeditor-content.html：

<!DOCTYPE html>
<html>
<head>
    <title>CKEditor Get Content Demo!</title>
</head>
<body>
    <script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>
    <div id="editor1" contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    </div>
    <button id="btn1">Click to get the content</button>
    <script>
        document.getElementById('btn1').addEventListener('click', function() {
            content = CKEDITOR.instances.editor1.getData()
            console.log(content);
        }, false);
    </script>
</body>
</html>

JSFiddle 上的现场演示

代码说明

从 CKEditor CDN 加载 CKEditor 库：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>

使用编辑器中包含的所有内容创建一个新的 DIV 元素

<div id="editor1" contenteditable="true">
ALL CONTENT HERE
 </div>

将 click 监听器添加到我们的按钮，一旦点击 - 获取 ckeditor 的 HTML 内容。

 <script>
     document.getElementById('btn1').addEventListener('click', function() {
         content = CKEDITOR.instances.editor1.getData()
         console.log(content);
     }, false);
 </script>

CKEDITOR.instances.editor1 中编辑器 editor1 的名称是我们使用的元素的 id 属性的值（<div id="editor1" ... >）

注意 console.log 的用法 - 编辑器的 HTML 内容将在控制台中提供（你可以通过单击 F12 键打开控制台）

有关更多信息，请参阅内联文档页面。