如何配置ckeditor以达到所见即所得效果

最近做cms系统，发觉ckeditor是常用的网页编辑器，但是我们使用时常常有一些不便。比如，在编辑器中看到的字体和页面展示的不同，这其实很容易解决。

修改ckeditor的content.css中的字体编辑器样式即可。比如前端是微软雅黑、14px的颜色为#333的字体，只需要把

默认：

body
{
/* Font */
font-family: Arial, Verdana, sans-serif;
font-size: 12px;


/* Text color */
color: #222;


/* Remove the background color to make it transparent */
background-color: #fff;
}

改为

body
{
/* Font */
font-family: "Microsoft YaHei";

/* Text color */
font-size:14px;

color:#333;


/* Remove the background color to make it transparent */
background-color: #fff;
}

这样前、后台看到的字体一致了！

但是还有一个问题，就是换行问题，往往后台看到是有3行、前台展示时变成了2行。原因很简单，前台展示框和后台的编辑器宽度不一致导致的。在已经前台宽度不变前提下，只需要调整后台编辑器宽度一致即可，修改ckeditor的config.js文件（和content.css在同一级目录）

比如：

CKEDITOR.editorConfig = function( config ) {
     config.width = '950px'; // 和页面展示框的一致，保证所见即所得

           ....