如何更改 Summernote 中的默认文本突出显示颜色？

Posted 2023-03-22

【中文标题】如何更改 Summernote 中的默认文本突出显示颜色？

【英文标题】：How do I change the default text highlighting color in Summernote?

【发布时间】：2018-07-10 06:44:36

【问题描述】：

我正在构建一个能够以丰富格式显示文本的 Rails 应用程序 - 该应用程序将由非技术人员使用，因此无法使用 markdown。

因此，我决定使用 Summernote 作为所见即所得的编辑器。

但是，初始化summernote时显示的默认突出显示颜色（背景颜色选项）是黄色，这与我的应用程序的配色方案确实冲突。知道如何重置它以使默认颜色成为我想要的颜色吗？

我想编辑 CSS 类以获得正确的颜色，但似乎 Summernote 通过内联样式标签应用背景颜色样式 - 不是最好的可编辑性。

如果我无法更改默认颜色，那么我可以使用其他一些自定义 JS 强制更改颜色吗？

更新：

我挖掘了页面源码，发现Summernote使用data-backcolor来设置高亮颜色。然后，每当页面加载时，我都会使用 JS 设置该值。

但使用 Summernote 本身的选项来做这件事仍然会更好（或者更优雅，我认为）。在发布我的 JS 解决方案之前，我会将这个问题留一两天，以防有人知道如何使用 Summernote 本身来解决这个问题。

Summernote 主题可能是我正在寻找的，但我必须进一步研究以确保。谢谢@razvans

更新 2：

我向所有看到这个问题的人道歉，但我的措辞很糟糕:(。

我指的是用于在summernote 中突出显示文本的颜色（summernote 指的是文本的背景颜色）——我指的不是编辑器本身的颜色。

再次，对此感到抱歉。 :(

【参考方案1】：

我挖掘了页面源码，发现Summernote将高亮颜色存储在data-backcolor属性中。它还用data-original-title="Recent Color" 标记突出显示按钮元素。所以，我用这些来改变 JS 的默认颜色：

首先，我选择了按钮并更改了它突出显示文本的颜色。我还更改了按钮本身的背景以更好地反映颜色：

$('[data-original-title="Recent Color"]').each ->
  $(this).attr "data-backcolor", "#F7C6CE"
  $(this).attr "style", "background-color: rgb(247, 198, 206);"

然后，我还更改了按钮内图标的背景，使其融入按钮（而不是按钮内的白色方块）：

$('i.note-recent-color').each ->
  $(this).attr "style", "background-color: rgb(247, 198, 206);"

最后，我删除了选择新的突出显示颜色的选项，因为这在我的应用程序中不需要，只会让使用它的人感到困惑。选择新颜色的按钮被赋予了data-original-title="More Color" 属性：

$('[data-original-title="More Color"]').each ->
  $(this).attr "style", "display: none;"

【参考方案2】：

2022：我遇到了几乎同样的问题。我需要始终将背景颜色设置为“透明”，并限制文本前景色的数量。同时禁用选择其他颜色的选项。基本上，我只想让用户在 4 种文本颜色之间进行选择，所有颜色都具有透明背景。所以我删掉了summernote.js中的代码（summernote-lit.js line 9837）：

// pallete colors(n x n)
colors: [['#FFFF00', '#FF0000', '#00FF00', '#0000FF']],
// http://chir.ag/projects/name-that-color/
colorsName: [['Yellow', 'Red', 'Green', 'Blue']],
colorButton: 
  foreColor: '#000000',
  backColor: '#transparent'

我还将弹出框（summernote-lite.js 第 7429 行）更改为：

items: (foreColor ? ['<div class="note-palette">', '<div class="note-palette-title">' 
+ this.lang.color.foreground + '</div>', '<div>', '</div>', '<div 
class="note-holder" data-event="foreColor"><!-- fore colors --></div>', 
'<div>', '', '', '</div>', // Fix missing Div, Commented to find easily if it's wrong          
'', '</div>'].join('') : ''),

结果是：

我知道这不是一个优雅的解决方案，因为我只是在破解和硬编码东西，但它达到了我的目的。