代码改变世界

修改KindEditor的CSS文件

2011-10-09 17:50  sniper007  阅读(1712)  评论(0编辑  收藏  举报

KindEditor 编辑器带有一个 css 文件,以规范编辑器的背景色和字体大小,具体文件内容如下:

.ke-content {
  font-size: 10px;
  background-color: #ffffff;
}

字 体规格定义为10个像素,如果觉得太小了,可以根据需要修改,单位可以用 px ,也可以用 pt ,看需要而定吧。同样的,背景色也可以修改,但不建议。如果需要,还可以增加一些其他的内容,以修饰编辑器的外观。修改好后保存,清除IE缓存,刷新浏览 器即可看到编辑器正文部分发生了变化:字体大小规格变为预设的,背景色如果设置了也一样有效果。

从道理上讲,我们也可以不要这个文字,直接在引用 KindEditor 的页面文档中的 css 代码区域里定义 .ke-content 样式,把上述代码复制过来即可。如果这样,我们应把引用编辑器的页面文档中的如下 js 语句删除掉:

cssPath : './ke.css',

但强烈建议不那么做,还是保留 css 文件和 js 上述语句,原因是在 KindEditor.js 文件里会用到 cssPath 参数,JS是很脆弱的,一旦找不到相应参数,在一些浏览器环境下会出现问题。

最后提一下如何指定 css 文件路径。它放在调用 KindEditor 编辑器的页面文档的 js 代码里,该路径参数包含了路径和文件名,这意味着我们可以修改 KE 的 css 文件名,请看:

KE.show({ id : 'content1',
cssPath : '/xdiary/ke/ke.css',
newlineTag : 'p'
});

上述代码表明:我们把 KindEditor 的 css 文件名改为了 ke.css,并放在网站一级目录 xdiary 下的子目录 ke 下面。