富文本编辑器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中的配置。


觉得内容还不错?打赏个钢镚鼓励鼓励!!👍

彩虹烘鞋器可伸缩快速干鞋机家用旅行便携式烤鞋暖鞋器成人儿童安全烘干器鞋靴除湿机 伸缩款Q8103
¥46.00
蜀海 肥牛火锅肉卷 500g 袋装 火锅食材 铜锅涮肉
¥39.00
修正腰椎间盘突出膏贴护腰椎突出症远红外磁疗筋骨贴骨质增生骨刺贴腰痛贴腰部酸疼痛腰间盘突出专用贴
¥35.00
费列罗(FERRERO)进口榛果威化糖果巧克力制品喜糖情人节礼盒16粒礼盒装200g
¥39.00
诺伯豪斯 口罩医用柳叶鱼型独立包装 时尚网红情侣口罩男女 含熔喷布医用口罩 夏花粉30枚
¥28.00
手护佳 一次性食品级丁腈手套 厨房家用公司复工学生开学劳保防护 盒装100只蓝色 L号
¥47.30
菲洛嘉 Filorga 水光精华7ml+水光面霜7ml+水光睡眠面膜7ml
¥42.00
简值了京东鲜花 雪山玫瑰10枝+水仙百合10枝组合款鲜花生日礼物
¥36.90