summernote在线编辑器的样式乱了怎么改?

《summernote在线编辑器的样式乱了怎么改?》要点:
本文介绍了summernote在线编辑器的样式乱了怎么改?,希望对您有用。如果有疑问,可以联系我们。

相关主题:JS、Jquery插件 / summernote在线编辑器

summernote是一款非常棒的在线编辑器,做前端非常适合。

风格简洁大气,还有主题可供更换 http://summernote.org/examples/#themes-with-bootswatch

但是你会发现,经常在引用后,会受到页面上其它的CSS样式影响,比如button样式和dropdown下拉面板。

在一些JS/JQUERY框架中,一般会重新定义bootstrap样式,就很容易让summernote受到影响。

下面就是一例。这里的summernote受到框架样式影响,

下拉菜单本来是这样的:

summernote在线编辑器的样式乱了怎么改?1

summernote在线编辑器的样式乱了怎么改?2

现在变成这样了:

summernote在线编辑器的样式乱了怎么改?3

summernote在线编辑器的样式乱了怎么改?4

看到没,背景色被污染了,对齐方式按钮下拉菜单宽度也变小了。

解决办法:

如果不想去动源代码,可以这样修改:

1、直接加CSS修改:主要是用.note-editor这个顶级样式类来控制CSS的优先顺序。

有的可以直接修改。比如背景色:

/*下拉弹出面板样式受页面CSS影响,修复*/
.note-editor .dropdown-menu{
       background-color:#fff; border: 1px solid #bababa;
}
.note-editor .dropdown-menu a{
       color:#000;
}
.note-editor .btn{
       padding: 6px 10px;  /*按钮大小*/
}
.note-editor  .note-btn i[class*='note-icon-']{
       margin-right: 1px;
}
/*图片和视频上传弹出面板上边距加大*/
.note-editor .modal-content{
       margin-top: 40%;
}

2、要添加JQ代码来控制:

在上面的对齐面板,summernote插件本身没有对它添加特定的类或ID,通过CSS优先级方式很不好控制,干脆给它加个样式吧:

在页面$(function(){ ... })尾部添加:

$('button[data-original-title=段落],button[data-original-title=Paragraph]').next('div').addClass('parapop');//attr({id:'parapop'});

现在可以控制CSS了:

/*对齐方式下拉面板宽度调整*/
.note-editor  .note-btn-group div.parapop{
       min-width:228px;padding: 5px;
}
.note-editor  .note-btn-group div.parapop div.note-list{
       margin-left: 5px;
}

再刷新一下就正常了。

同理,其它样式乱了问题也是这样处理。

有关summernote编辑器的PHP服务端处理函数参http://www.jb51.cc/jiaocheng/54.html 

summernote官网:http://summernote.org/

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型 ...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...