首页 > 技术文章 > CkEditor - Custom CSS自定义样式

chenkuang 2017-12-28 16:08 原文

CkEditor是目前世界上最多人用的富文本编辑器。遇上客户提需求,要改一下编辑器的样式,那就是深入CkEditor的底层来修改源码。

修改完的样式是这样,黑边,蓝底,迷之美学。这就是男人自信的表现,风迷万千。

 

1. 下载了CKEDITOR,解压缩,里面是这样。

注意,CkEditor的css样式是在skins/moono-lisa/editor.css这个。如果想自定义样式,就在这修改。

2. 动手修改样式

边框颜色:

.cke_chrome {
    border: 1px solid #111111;
}

背景颜色:

<script type="text/javascript">
    CKEDITOR.replace("context");
    CKEDITOR.addCss(".cke_editable{background-color: #4cffea}");
</script>

TopBar底边样式:

.cke_top {
    border-bottom: 1px solid #111111;
}

 

3. icon

在skins/moono-lisa/icons_hidpi.png里修改icon。

我把碳黑色icon全部转成了纯黑色icon。

推荐阅读