更新

Question

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

因此，我决定使用Summernote作为WYSIWYG编辑器。

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

我想要编辑CSS类以获得正确的颜色，但看起来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的默认颜色：

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

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

Answer 2

Summernote支持主题 - https://summernote.org/themes.html，https://github.com/summernote/awesome-summernote#themes-and-skins - 尝试使用一个主题。

对于可编辑区域（.note-editable），您可以根据需要更改css。我目前正在我的项目中使用它，它的工作原理。没有使用任何主题，但我手动更改了CSS，它的工作原理。使用v0.8.4。

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

更新

更新2：

2 个答案: