ngx-quill中获取编辑器内容时如何处理Emoji表情

在使用ngx-quill富文本编辑器时，开发者可能会遇到一个常见问题：当通过getText()方法获取编辑器内容时，其中的Emoji表情无法正常显示。这实际上是由Quill编辑器的设计机制决定的，需要开发者理解其底层原理并采用正确的处理方式。

问题本质

ngx-quill是基于Quill封装的Angular组件，而Quill编辑器内部使用Delta格式来存储内容。当调用getText()方法时，编辑器会执行纯文本提取操作，这个过程会剥离所有HTML格式和特殊内容（包括通过quill-emoji模块插入的表情符号）。

解决方案

方法一：使用Delta或HTML格式获取内容

1. 获取Delta对象
   通过editor.getContents()可以获取完整的Delta对象，这个对象会保留所有格式信息和嵌入内容（包括Emoji）。

2. 转换为HTML
   使用Quill的convert接口将Delta转换为HTML字符串，这样可以保留Emoji的HTML表示形式。

方法二：自定义内容提取

开发者可以：

1. 遍历Delta对象的ops数组
2. 识别包含Emoji的insert操作
3. 将这些操作转换为目标格式（如Unicode字符或自定义标记）

最佳实践建议

1. 根据使用场景选择格式

   • 如果需要纯文本展示，考虑将Emoji转换为对应的Unicode字符
   • 如果需要富文本展示，建议保留Delta或HTML格式

2. 注意内容安全
   当处理用户生成内容时，特别是转换为HTML时，务必进行适当的XSS防护处理。

3. 考虑性能因素
   对于大型文档，直接操作Delta对象比转换为HTML更高效。

通过理解Quill的内容存储机制和采用合适的提取方法，开发者可以完美解决Emoji内容的获取问题，同时保持编辑体验的一致性。