从 CKEditor 获取格式化的 HTML

Posted 2023-02-16

【中文标题】从 CKEditor 获取格式化的 HTML

【英文标题】：Get formatted HTML from CKEditor

【发布时间】：2011-01-27 07:04:36

【问题描述】：

我在我的网络应用程序中使用 CKEditor，但我不知道如何使用 html 格式获取编辑器的内容。

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

这将为我提供在 CKEditor 中输入的文本，没有任何标记。

然而，

var q = objEditor.getHTML();

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

【参考方案1】：

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

api 定义的方法是getData() 如果这不起作用那么你的代码中还有其他问题，请尝试使用警报来验证内容。

【讨论】：

如果你的意思是他们应该使用一些console.log，你应该已经意识到用户正在尝试使用不存在的方法，所以如果他查看控制台他会看到错误。与其向他解释有关如何调试 javascript 的所有细节（以及可能需要安装一些额外的插件或切换浏览器，请记住他四年前问过这个问题），防弹方法是使用提供的警报信息，无需进一步解释。

恕我直言，使用警报进行调试是非常糟糕的做法，不应鲁莽地建议任何人。 （因为 SO 是一个众所周知的资源，尤其适合初学者）

所以如果我写：“或者学习如何使用合适的浏览器调试javascript”对你会更好？那没有帮助。警报始终在每个浏览器中都有效，没有任何要求。我很高兴看到您在四年前在没有警报的情况下在移动设备上调试网页。

@Wolle 使用 alert() 而不是 console.log() 对初学者有好处，因为您可以在使用 alert() 时暂停执行，如果是 console.log() 则必须使用 debugger 关键字暂停执行。 console.log() 和 alert() 都有自己的优势。我知道大多数初学者使用alert() 而不是console.log()，但这并没有使一种或其他一种不好的做法，只是不要在生产中使用它，如果它不好，浏览器会删除它。

【参考方案2】：

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

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

CKEDITOR.instances.my_editor.getData()

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

它的反面是setData()：

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

【参考方案3】：

要从编辑器中获取 htmlData，您应该使用下面的代码 sn-p：

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

如果此解决方案不起作用，请检查您是否卸载了 BBCode 插件。

【讨论】：

异常文档未定义

请记住，您应该将 Editor 替换为您的实例名称，例如，在我的情况下是：CKEDITOR.instances.sfw_fc_fccd_e2_dui27_fcUse_fccd_e16_dui27_fcUse_fccd_e2_dui31_tbTextGeneratorUse.getData()，因为我在 ASP.Net 中使用它并且实例名称是 @ 987654325@.

【参考方案4】：

请使用以下行更新 ckeditor config.js

config.fullPage = true;

这将在您请求 getData() 时返回完整的 html；

【参考方案5】：

这对我有用：

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

【参考方案6】：

我正在使用预览插件来获取完整的 HTML 内容，希望对您有所帮助。

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

【参考方案7】：

对于 Java 用户...

按下提交按钮后，请求通过 HTTP Post 方法进行。这个 Post 请求还在使用 textarea 的 name 属性命名的参数中包含格式化的 html。

所以，如果你的 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...

【参考方案8】：

我意识到这已经过时了，但我很难找到一个有意义的答案并返回实际的 HTML，包括图像。如果您的 ckeditor 实例附加到 textarea，您可以简单地获取 textarea 的值以获取 HTML。

例如，如果您使用的是 jQuery：

$('#my_editor').val()

无需深入研究 API。

【讨论】：

这对我不起作用。未经修改，textarea 中似乎没有数据，所有数据都在 iFrame 内。

不知道该告诉你什么。我有这个在生产中工作。也许您还需要使用 jquery 命令来创建它？ $j('#element').ckeditor();

【参考方案9】：

如果你有两个CKEditor，你可以使用下面的代码：

HTML

<textarea name="editor1"></textarea>
<textarea name="editor2"></textarea>

JS

CKEDITOR.replace( 'editor1' );
CKEDITOR.replace( 'editor2' );

var objEditor1 = CKEDITOR.instances["editor1"];
alert(objEditor1.getData()); // get html data

var objEditor2 = CKEDITOR.instances["editor2"];
alert(objEditor2.getData()); // get html data

Online Demo (jsfiddle)

【参考方案10】：

在ckeditor 5中，可以通过editor.getData()获取html数据

这是一个例子：

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

【参考方案11】：

我在编辑器中使用了插入媒体功能，而 .getData() 没有返回显示视频缩略图图标所需的 HTML。以下内容为我获得了最终的 HTML：

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

【参考方案12】：

试试这个：

CKEDITOR.instances.YOUREDITOR.element.getHtml();

使用 CKEDITOR.instances.YOUREDITOR.element 选择一个 DOM 元素，如果使用 CKEDITOR.instances.YOUREDITOR.element.getHtml(); 您可以从编辑器元素中获取所有 html。

【讨论】：

请不要只添加一行。解释你的答案。

对不起，选择编辑器时，可以选择元素DOM

with elemtDom = CKEDITOR.instances.YOUREDITOR.element;并使用 getHtml() 从该元素获取 HTML；所以你可以使用 ** CKEDITOR.instances.YOUREDITOR.element.getHtml(); **