Angular免费富文本编辑器推荐及插入图片对齐问题求解

免费编辑器推荐 #

• TinyMCE Angular 版本
  开源免费，对Angular全版本兼容性好，原生支持图片上传、图片路径自定义配置，不会擅自修改上传后的图片地址。内置完整的图片格式化功能，支持左对齐、居中、右对齐、浮动环绕等对齐操作，生成标准HTML结构，接口提交和内容回显都不需要额外适配。
• CKEditor 5 Angular 组件
  免费开源版完全满足文字+图片输入、HTML输出的需求，自带的图片处理模块支持对齐、尺寸调整等操作，可自定义图片上传适配器，完全可控图片路径生成逻辑，生成的语义化HTML可直接提交接口，回显无兼容问题。
• Quill + ngx-quill 封装包
  轻量免费，社区生态成熟，默认没有图片对齐功能只要引入第三方的quill-image-align扩展模块即可实现，支持完全自定义图片上传逻辑，不会篡改已上传的图片URL。

现有编辑器问题修复方案 #

flora editor 图片路径异常修复 #

在编辑器初始化配置中找到路径转换相关配置项，关闭相对路径自动转换开关，配置为保留上传后返回的原始图片路径即可解决图片无法显示的问题。

kolkov angular editor 图片对齐实现方案 #

不需要更换编辑器的前提下可以通过自定义扩展实现对齐功能：

• 自定义扩展工具栏，新增左对齐、居中、右对齐三个图片操作按钮
• 给编辑器注册选中事件，当选中图片时点击对齐按钮，动态给对应<img>标签添加对齐样式，比如居中就添加style="display:block;margin:0 auto"，也可以统一添加自定义类名，在回显页面提前写好对应类的样式即可
• 也可以监听编辑器内容变更事件，插入图片时自动给img标签注入默认对齐样式，或者在提交接口前统一处理HTML文本中的图片样式规则

内容的提问来源于stack exchange，提问作者Abhishek Agarwal