从CKEditor获取格式化的HTML

Question

我在我的Web应用程序中使用CKEditor，但是我不知道如何获取带有HTML格式的编辑器内容。

var objEditor = CKEDITOR.instances["sectionTextArea"];
var q = objEditor.getData();

这将让我获取在CKEditor中输入的纯文本，不包含任何标记。

然而，

var q = objEditor.getHTML();

将返回一个null值。我做错了什么？

- sslepian

Answer 1

getHTML不是CKEditor对象的一个方法，所以你应该会得到一个javascript错误，而不是null。

API定义的方法是getData()，如果这个方法不起作用，则您的代码中可能存在其他问题，请尝试使用alert验证此时的内容。

- AlfonsoML

---

如果你的意思是他们应该使用一些console.log，那么你应该意识到用户试图使用不存在的方法，所以如果他看了控制台，他就会看到错误。而不是向他解释有关如何调试JavaScript的所有细节（以及可能需要安装一些额外的插件或切换浏览器，记住他四年前问过这个问题），最可靠的方法是使用提供信息的警报，无需进一步解释。 - AlfonsoML

以我之见，为了调试而使用alert是非常糟糕的做法，不应该轻率地建议任何人这样做。（因为SO是一个特别针对初学者的著名资源） - ˈvɔlə

如果我这样写："或者学习如何使用适当的浏览器来调试JavaScript"，对您会更有帮助吗？但这没什么用。在任何浏览器中，警告都能正常工作而无需任何条件。我想看看您如何在四年前没有警告的情况下调试移动端网页。 - AlfonsoML

@Wolle 使用 alert() 而不是 console.log() 对于初学者来说是很好的，因为使用 alert() 可以暂停执行。如果使用 console.log()，则必须使用 debugger 关键字来暂停执行。console.log() 和 alert() 都有其优点。我知道大多数初学者使用 alert() 而不是 console.log()，但这并不意味着其中一个是不好的实践方法，只是不要在生产中使用。如果它不好，浏览器就会将其删除。 - 27px

Answer 2

只是知道正确的方法是getData()并没有帮助我。我不知道如何在CKEditor对象上使用它，而CKEDITOR.getData()则无效。

这是在CKEDITOR对象上使用getData()的方式：

CKEDITOR.instances.my_editor.getData()

...其中 my_editor 是用于 CKEditor 的文本区域的 ID。

相反的方法是 setData()：

CKEDITOR.instances.my_editor.setData("<p>My Text</p>");

- low_rents

Answer 3

获取编辑器中的htmlData应使用以下代码片段：

```javascript var htmlData = editor.getData(); ```

var htmldata = CKEDITOR.instances.Editor.document.getBody().getHtml();

如果这个解决方案不起作用，检查一下你是否卸载了 BBCode 插件。

- Tomasz Dzięcielewski

---

异常文档未定义。 - panky sharma

请记住，您应该将“Editor”替换为您的实例名称，例如，在我的情况下，它是：“CKEDITOR.instances.sfw_fc_fccd_e2_dui27_fcUse_fccd_e16_dui27_fcUse_fccd_e2_dui31_tbTextGeneratorUse.getData()”，因为我在ASP.Net中使用它，实例名称是“sfw_fc_fccd_e2_dui27_fcUse_fccd_e16_dui27_fcUse_fccd_e2_dui31_tbTextGeneratorUse”。 - Muhammad Musavi

Answer 4

请在 ckeditor 的 config.js 文件中加入以下行：

config.fullPage = true;

当您请求getData()时，它将返回完整的HTML。

- MACMAN

Answer 5

这对我有用：

这对我有帮助：

CKEDITOR.instances["id"].getData()

- Flezcano

Answer 6

在 ckeditor 5 中，你可以使用 editor.getData() 获取 HTML 数据。

以下是一个示例：

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log(editor.getData());
    } )
    .catch( error => {
        console.error( error );
    } );

- AmirRezaM75

Answer 7

我正在使用预览插件获取完整的HTML内容，希望它能够帮到您。

CKEDITOR.getFullHTMLContent = function(editor){
 var cnt = "";
 editor.once('contentPreview', function(e){
  cnt = e.data.dataValue;
  return false;
 });
 editor.execCommand('preview');
 
 return cnt;
}

- Emanuele Disco

Answer 8

针对Java用户...

在按下提交按钮后，请求通过HTTP Post方法发送。此Post请求还包含了格式化的HTML，该HTML位于名为textarea的参数中，使用name属性命名。

因此，如果您的textarea如下所示...

<form method="post" action="createPDF.do"> <textarea name="editor1" id="editor1"/>
<input type="submit"/> </form>

然后，在按下提交按钮后，您可以通过以下方式在servlet/controller中获取格式化的HTML：

String htmlContent = request.getParameter("editor1");

您也可以将包含格式化HTML的变量（'htmlContent'）传递给ITEXT（或其他一些PDF转换器），以创建PDF文件...

- Amarjeet Singh

Answer 9

我知道这是旧的，但是我在寻找一个有意义并返回实际HTML内容（包括图像）的答案时遇到了困难。如果您的ckeditor实例与textarea相关联，您可以简单地获取textarea的值来获取HTML内容。

例如，如果您使用jQuery：

$('#my_editor').val()

无需深入挖掘API。

- Brent

---

这对我不起作用。如果不进行修改，文本区域中似乎没有数据，所有数据都在 iFrame 中。 - low_rents

不知道该对你说什么。我已经在生产环境中实现了这个功能。也许你需要使用jQuery命令来创建它？ $j('#element').ckeditor(); - Brent

Answer 10

我在编辑器中使用了插入媒体功能，但 .getData() 没有返回所需的 HTML 以显示视频缩略图图标。以下方法对我有效，可以获取最终的 HTML：

$(".ck-content").html()

- Jake Sully