后台如何接受CKeditor编辑器提交的内容呢
时间: 2024-02-11 09:07:01 浏览: 146
CKEditor 编辑器提交内容的方式和普通表单提交没有区别。在后台接收 CKEditor 编辑器提交的内容,可以通过以下步骤实现:
1. 在前端页面中,使用 CKEditor 编辑器生成富文本内容,并将其作为表单元素的值提交给后台。例如:
```html
<form action="/submit" method="POST">
<textarea name="content" id="editor"></textarea>
<button type="submit">提交</button>
</form>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
```
2. 在后台接收表单提交的数据。由于 CKEditor 生成的内容是富文本格式,因此需要使用相应的富文本编辑器处理工具来解析内容。常用的富文本编辑器处理工具有 `CKEditor` 官方提供的解析工具,以及 `htmlparser2`、`cheerio` 等第三方库。例如,使用 `CKEditor` 官方提供的解析工具 `@ckeditor/ckeditor5-engine` 来解析富文本内容:
```javascript
const { HtmlEmbeddingMode } = require( '@ckeditor/ckeditor5-engine' );
const { Parser } = require( '@ckeditor/ckeditor5-engine' );
const content = req.body.content;
const parser = new Parser( HtmlEmbeddingMode );
const doc = parser.parse( content );
// 获取文本内容
const text = doc.getRoot().getChildren()[0].data;
```
以上代码中,`req.body.content` 是表单提交的 CKEditor 编辑器生成的富文本内容,使用 `@ckeditor/ckeditor5-engine` 库中的 `Parser` 类解析富文本内容,然后通过 `doc.getRoot().getChildren()[0].data` 获取文本内容。
3. 将解析后的内容存储到数据库或文件中,或者进行其他业务逻辑处理。
阅读全文