富文本编辑器summernote工具栏color默认字体前后背景色设置

我博客的后台富文本编辑器使用的是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中的配置。

相关文章