Flutter如何修改html-editor-enhanced编辑器的光标颜色

问题 #

使用html-editor-enhanced实现富文本编辑功能时，编辑器获取焦点后光标默认为绿色，和应用主题配色不匹配，需要修改光标颜色。

解决方案 #

根据集成场景选择对应方案即可，不需要修改组件源码：

Web端（原生JS/React/Vue等前端框架集成） #

默认绿色光标来自组件内置的样式定义，通过CSS覆盖原生caret-color属性即可实现自定义，优先级足够覆盖内置样式：

• 在全局样式文件或者组件样式文件中添加以下代码，将色值替换为你的应用主题色：

/* 编辑区默认光标颜色覆盖 */
.html-editor .ql-editor {
  caret-color: #你的主题色值 !important;
}
/* 聚焦态光标颜色覆盖，避免焦点触发后样式回退为默认绿色 */
.html-editor:focus-within .ql-editor {
  caret-color: #你的主题色值 !important;
}

说明：caret-color是W3C标准CSS属性，全量兼容现代浏览器，仅修改输入光标颜色，不会对文本选中效果、输入内容样式、工具栏样式产生任何影响。如果你的项目给编辑器设置了自定义外层容器类名，将选择器中的.html-editor替换为实际使用的容器类名即可。

Flutter端集成 #

Flutter版本的html-editor-enhanced开放了光标颜色的配置入参，初始化编辑器时直接传入主题色即可：

HtmlEditor(
  controller: editorController,
  // 配置光标颜色为应用主题色
  cursorColor: Theme.of(context).primaryColor,
  // 其他业务配置参数
)

注意事项 #

不要直接修改依赖包内的源码调整颜色，后续升级依赖版本时修改会被直接覆盖，上述两种方案均为组件支持的自定义方式，版本兼容性更好，不会因为依赖升级失效。

内容的提问来源于stack exchange，提问作者Trần Văn Hiếu