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

Question

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

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

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

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

如果我不能更改默认颜色，那么有什么方法可以使用其他自定义 JS 强制更改颜色？

更新：

我深入研究了页面源代码，发现 Summernote 使用 data-backcolor 设置高亮颜色。然后我使用 JS 在页面加载时设置该值。

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

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

更新 2：

我向所有查看此问题的人道歉，但我措辞不当:(。

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

再次抱歉。 :(

Answer 1

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

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

$('[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);"

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

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

Answer 2

2022：我遇到了几乎同样的问题。我需要始终将背景颜色设置为 'transparent'，并限制文本前景色的数量。同时禁用 select 其他颜色的选项。基本上，我只想让用户在 4 种文本颜色之间进行选择，所有颜色都具有透明背景。所以我砍掉了 summernote.js 中的代码（summernote-lit.js 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('') : ''),

结果是：

我知道这不是一个优雅的解决方案，因为我只是在进行黑客攻击和硬编码，但它达到了我的目的。

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

How do I change the default text highlighting color in Summernote?

javascript

css

ruby-on-rails

colors

summernote

更新：

更新 2：