Javascript 从 CKEditor 获取格式化的 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2440680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get formatted HTML from CKEditor
提问by sslepian
I'm using CKEditor in my web app, and I'm at a loss as to how to get the contents of the editor with HTML formatting.
我在我的网络应用程序中使用 CKEditor，我不知道如何使用 HTML 格式获取编辑器的内容。
var objEditor = CKEDITOR.instances["sectionTextArea"];
var q = objEditor.getData();
This will get me the text entered in CKEditor, without any markup.
这将使我在 CKEditor 中输入文本，没有任何标记。
However,
然而，
var q = objEditor.getHTML();
will return a null value. What am I doing wrong?
将返回一个空值。我究竟做错了什么？
采纳答案by AlfonsoML
getHTML isn't a method of a CKEditor object, so instead of null you should have a javascript error.
getHTML 不是 CKEditor 对象的方法，因此您应该有一个 javascript 错误而不是 null。
The method defined by the api is getData()if that doesn't work then you have some other problem in your code, try to use an alert to verify the contents at that moment.
api 定义的方法是getData()如果它不起作用那么您的代码中存在其他问题，请尝试使用警报来验证当时的内容。
回答by low_rents
just to know that the right method for this is getData()didn't help me. I did not know how to use it on the CKEditor object. and CKEDITOR.getData()doesn't work.
只是知道正确的方法对getData()我没有帮助。我不知道如何在 CKEditor 对象上使用它。并且CKEDITOR.getData()不起作用。
this is how getData()is used on the CKEDITOR object:
这是如何getData()在 CKEDITOR 对象上使用：
CKEDITOR.instances.my_editor.getData()
...where my_editoris the id of your textarea used for CKEditor.
...my_editor用于 CKEditor 的 textarea 的 id在哪里。
The opposite of it is setData():
与之相反的是setData()：
CKEDITOR.instances.my_editor.setData("<p>My Text</p>");
回答by Tomasz Dzi?cielewski
To get htmlData from editor you should use the code snippet bellow:
要从编辑器获取 htmlData，您应该使用以下代码片段：
var htmldata = CKEDITOR.instances.Editor.document.getBody().getHtml();
If this solution won't work, check if you have BBCodeplugins uninstalled.
如果此解决方案不起作用，请检查您是否BBCode卸载了插件。
回答by MACMAN
Please update ckeditor config.js with the following line
请使用以下行更新 ckeditor config.js
config.fullPage = true;
This will return the full html when you request getData();
这将在您请求 getData() 时返回完整的 html；
回答by Flezcano
This worked for me:
这对我有用：
CKEDITOR.instances["id"].getData()
回答by Emanuele Disco
I am using the preview plugin to get the full HTML content, hope it helps.
我正在使用预览插件来获取完整的 HTML 内容，希望对您有所帮助。
CKEDITOR.getFullHTMLContent = function(editor){
var cnt = "";
editor.once('contentPreview', function(e){
cnt = e.data.dataValue;
return false;
});
editor.execCommand('preview');
return cnt;
}回答by Amarjeet Singh
For Java Users...
对于 Java 用户...
After pressing the submit button, the request goes by HTTP Post method. This Post request also contains the formatted html in the parameter named using the name attribute of the textarea.
按下提交按钮后，请求通过 HTTP Post 方法进行。此 Post 请求还在使用 textarea 的 name 属性命名的参数中包含格式化的 html。
So, if your textarea is something like...
所以，如果你的 textarea 是这样的......
<form method="post" action="createPDF.do"> <textarea name="editor1" id="editor1"/>
<input type="submit"/> </form>
<form method="post" action="createPDF.do"> <textarea name="editor1" id="editor1"/>
<input type="submit"/> </form>
Then, after pressing the submit button, you can get the formatted html in your servlet/controller by :
然后，按下提交按钮后，您可以通过以下方式在您的 servlet/控制器中获取格式化的 html：
String htmlContent = request.getParameter("editor1");
You can also pass this variable containing the formatted html ('htmlContent') to ITEXT (or some other pdf converters) to create the pdf...
您还可以将此包含格式化 html（'htmlContent'）的变量传递给 ITEXT（或其他一些 pdf 转换器）以创建 pdf...
回答by Brent
I realize this is old, but I had trouble finding an answer that made sense and returned the actual HTML, including images. If your ckeditor instance is attached to a textarea, you can simple get the value of the textarea to get the HTML.
我意识到这是旧的，但我很难找到有意义的答案并返回实际的 HTML，包括图像。如果您的 ckeditor 实例附加到 textarea，您可以简单地获取 textarea 的值以获取 HTML。
For instance, if you're using jQuery:
例如，如果您使用 jQuery：
$('#my_editor').val()
No need to go digging through the API.
无需深入挖掘 API。
回答by Ali Soltani
If you have two CKEditor, you can use code bellow:
如果您有两个CKEditor，则可以使用以下代码：
HTML
HTML
<textarea name="editor1"></textarea>
<textarea name="editor2"></textarea>
JS
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
回答by AmirRezaM75
in ckeditor 5, you can get the html data with editor.getData()
在ckeditor 5 中，您可以获得 html 数据editor.getData()
here is an example:
这是一个例子：
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log(editor.getData());
} )
.catch( error => {
console.error( error );
} );
