获取和保存数据 - 集成 - 构建文档 - ckeditor5中文文档
获取和保存数据 - 集成 - 构建文档 - ckeditor5中文文档
CKEditor 5允许您以各种方式从中检索数据并将其保存到服务器（或通常用于您的系统）。 在本指南中，您可以了解可用选项及其优缺点。
与HTML表单自动集成
这是集成编辑器的经典方式。 它通常用于更简单的CMS，论坛，评论部分等。
此方法仅在Classic编辑器中可用，并且仅当编辑器用于替换<textarea>元素时才可用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<form action="[URL]" method="post">
<textarea name="content" id="editor">
<p>This is some sample content.</p>
</textarea>
<p><input type="submit" value="Submit"></p>
</form>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
一旦用户提交表单，经典编辑器将自动更新<textarea>元素的值。 您不需要任何其他JavaScript代码即可将编辑器数据发送到服务器。
在HTTP服务器中，您现在可以从POST请求的内容变量中读取编辑器数据。 例如，在PHP中，您可以通过以下方式获取它：
<?php
$editor_data = $_POST[ 'content' ];
?>
请注意，在提交之前，CKEditor会自动更新替换后的<textarea>元素。 如果需要使用JavaScript以编程方式访问<textarea>值（例如，在onsubmit处理程序中验证输入的数据），<textarea>元素仍有可能存储原始数据。 要更新替换的<textarea>的值，请使用editor.updateSourceElement()方法。
如果您需要随时使用JavaScript从CKEditor获取实际数据，请使用editor.getData()方法，如下一节所述。
手动检索数据
当你:
- 使用Ajax请求而不是与HTML表单的经典集成
- 实现单页面应用程序
- 使用与经典编辑器不同的编辑器类型（因此，不能使用以前的方法）
您可以使用editor.getData()方法从编辑器中检索数据。
为此，您需要将引用存储到编辑器中，因为 - 与CKEditor 4不同 - 没有全局CKEDITOR.instances属性。 您可以通过多种方式执行此操作，例如将编辑器分配给在then()的回调之外定义的变量：
let editor;
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( newEditor => {
editor = newEditor;
} )
.catch( error => {
console.error( error );
} );
// Assuming there is a <button id="submit">Submit</button> in your application.
document.querySelector( '#submit' ).addEventListener( 'click', () => {
const editorData = editor.getData();
// ...
} );
自动保存功能
自动保存功能允许您在需要时（当用户更改内容时）自动保存数据（例如，将其发送到服务器）。
默认情况下，此插件在任何版本中都不可用，因此您需要安装它。
假设您实现了一个saveData()函数，该函数将数据发送到您的服务器并返回一个成功保存数据后解析的promise，配置自动保存功能就像下面这样简单：
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [
Autosave,
// ... other plugins
],
autosave: {
save( editor ) {
return saveData( editor.getData() );
}
},
// ... other configuration options
} );
The autosave feature listens to the editor.model.document#change:data event, throttles it and executes the config.autosave.save() function.
自动保存功能侦听editor.model.document #change:data事件，对其进行限制并执行config.autosave.save()函数。
它还会侦听本机窗口#afterunload事件，并在以下情况下阻止它：
- 数据尚未保存（
save()函数未解析其承诺或由于限制而未调用它）。 - 或者任何编辑器功能都注册了“待处理动作”（例如，正在上载图像）。
这样可以在保存内容或图像上传等正在进行的操作未完成之前自动保护用户离开页面。
文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476865
文章版权归作者所有，转载请保留此声明。
腾讯云开发者
