从 CKEDITOR 获取纯文本时踩到的坑

发布于:2023-05-25 ⋅ 阅读:(143) ⋅ 点赞:(0)

背景

在做项目时需要做字符长度的验证,需要获取 CKEDITOR 中的纯文本。

由于 CKEDITOR 是富文本编辑器,直接用 CKEDITOR.instances.editor.getData() 得到的是含有 html 标签的内容。但是验证字符长度并不能包含 html 标签,需要获取纯文本。

CKEDITOR 提供了 getText 的方法用于获取纯文本,可是得到的却是整个 body 标签内的内容,网上搜索了一下大多提供的方法都是一样。起初还以为是版本原因,API 被废弃了,到官网一查文档发现并不是。后来偶然中发现,原因是因为我用的是 inline 模式,而非 stand 模式。

解决

如果是 stand 模式,可以使用 CKEDITOR.instances.editor.document.getBody().getText() 方法获取纯文本。

如果是 inline 模式,使用 CKEDITOR.instances.editor.document.getBody().getText() 得到的则是整个网页 body 内的内容。inline 模式应使用 CKEDITOR.instances.editor.container.getText() 方法。

原因

当 stand 模式的实现方式 iframedocument 属性引用的是 iframegetbody 后得到的是 iframe 中的内容,自然是我们想要的。

而 inline 则不是,是用 div 包裹内容,document 属性所引用的是 div 的父 document,也即整个文档。所以当 inline 模式时应使用 container 属性。


网站公告

今日签到

点亮在社区的每一天
去签到