Shopify主题开发：如何为text及textarea编辑器添加删除线按钮

问题 #

如何为text和textarea编辑器字段添加删除线按钮？
抱歉，这可能是基础问题，但删除线在电商场景中几乎和加粗一样常用！

原价$299 现价$199

已尝试操作 #

已查阅上述Shopify主题文档，同时搜索了Stack Overflow、Shopify社区、Dawn主题GitHub issues及谷歌，但仅发现大量商家也有相同需求。
恳请各位提供帮助，非常感谢。

解决方案 #

Shopify默认的text/textarea编辑器（基于TinyMCE）本身不带删除线按钮，得通过修改主题代码来添加，以下是具体步骤：

1. 定位编辑器初始化文件
   在主题的assets目录里，找包含TinyMCE初始化逻辑的JS文件，比如editor.js、base.js或者对应产品/页面区块的JS文件（不同主题位置有差异，Dawn主题可以重点看base.js）。

2. 修改工具栏配置
   找到初始化代码里的toolbar参数，把strikethrough加入工具栏按钮列表。举个例子：
   原配置可能是：

toolbar: 'bold italic underline | link | undo redo'

修改后：

toolbar: 'bold italic underline strikethrough | link | undo redo'

3. 处理区块设置里的编辑器
   如果是主题区块设置中的text/textarea字段，同样要找到对应区块的JS初始化代码，重复上面的工具栏修改步骤。

4. 自定义删除线样式（可选）
   要是想调整删除线的外观，在主题的base.css或component-editor.css里加自定义样式：

.mce-content-body s,
.mce-content-body strike {
  text-decoration: line-through;
  text-decoration-color: #ff4444;
  text-decoration-thickness: 2px;
}

注意：改代码前一定要备份主题，先在测试环境验证没问题再推到线上。如果用的是第三方主题，也可以联系开发者确认是否支持自定义工具栏，或者用Shopify应用商店里的编辑器增强插件替代（但优先推荐代码修改，减少插件依赖）。

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