我博客的后台富文本编辑器使用的是summernote这一款富文本编辑器。他默认的工具栏的字体按钮color的默认前后背景色配置为:前(黑)后(黄)。
而我自己习惯使用的配置是:前(红)后(透明)。因为工具栏是可以自定义的,我想这个默认按钮的前后背景色应该也是能配置,但是官方文档找了一圈,搜索引擎也搜了个遍也没找到这个的配置(可能有这个需求的人太少了)。我不甘心,直接看源码,好在一切都还顺利,最终在源码中找到这么一段代码:
colorButton: { foreColor: '#000000', backColor: '#FFFF00' },
经过debugger断点确定工具栏color按钮的默认前后背景色配置就是使用的这个配置,那么问题就好办了,直接在创建summernote的方法中,我们指定这个配置,那么我们的需求不是就可以实现了。说干就干,下面是我创建summernote的代码:
$('#summernote').summernote({ lang: 'zh-CN', toolbar: [ ['style', ['style']], ['font', ['bold', 'italic','underline','strikethrough','clear']], ['color', ['color']], ['para', ['ul', 'ol', 'paragraph']], ['table', ['table']], ['insert', ['link', 'picture', 'video']], ['view', ['undo','redo','fullscreen', 'codeview']], ], colorButton: { foreColor: 'red', backColor: 'transparent' }, });
这样我们就实现了默认工具栏中color的前后背景色配置为:前(红)后(透明)
有需要其他颜色自定义的可以自行修改colorButton中的配置。