uni-app editor组件颜色值为大写时 设置文字背景色后无法取消 字体颜色同样如此

uni-app editor组件颜色值为大写时 设置文字背景色后无法取消 字体颜色同样如此

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.1.13
浏览器平台 Chrome
浏览器版本 编辑器内置及其他浏览器
项目创建方式 HBuilderX

示例代码：

<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color" data-value="#0000FF"></view>
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00FF00"></view>

按照这样修改即可在hello组件页面即可达到效果

<view :class="formats.color === '#0000FF' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color" data-value="#0000FF"></view>
<view :class="formats.backgroundColor === '#00FF00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00FF00"></view>

两个都能体现出问题，:class不影响结果

操作步骤：

可直接在hello组件实例下复实现Hello\pages\component\editor

修改data-name为backgroundColor和color的data-value为#00FF00

预期结果：

使用大写十六进制颜色值不影响效果，可保证代码颜色值风格一致性不受印象

实际结果：

现有情况只能被迫使用小写颜色值

bug描述：

其他端应该也有，问题可能存在editorCtx.format(name, value)内部实现，文字颜色设置和文字背景颜色设置均如此，颜色值为大写时文字颜色样式无法取消


更多关于uni-app editor组件颜色值为大写时 设置文字背景色后无法取消 字体颜色同样如此的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app editor组件颜色值为大写时 设置文字背景色后无法取消 字体颜色同样如此的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的editor组件颜色值大小写敏感问题。在uni-app的editor组件实现中，当使用大写十六进制颜色值（如#00FF00）设置文字颜色或背景色后，再次调用editorCtx.format(name, null)取消样式时会失效。

问题的根源在于editor组件内部在比较颜色值时可能采用了严格的大小写匹配，导致无法正确识别和移除已设置的大写颜色值样式。

解决方案：

  1. 统一使用小写颜色值（如#00ff00）作为临时解决方案
  2. 在设置颜色前将颜色值统一转换为小写：
// 在调用format前处理颜色值
const normalizedColor = colorValue.toLowerCase();
editorCtx.format(name, normalizedColor);
回到顶部