修改FCKeditor引用格式为DIV+CSS的方法

可视化编辑器FCKeditor功能虽然强大，但是有些设置还是需要自行修改。

     发现FCKeditor中的引用功能还是通过Table来实现，可是现在的网页一般都是用div+css来布局，因此现在我们也把它改成div+css的，使其更符合xhtml标准，而且还能代码更少还能节省更多的数据库空间。

    首先打开目录FCKeditor/editor/js下的fckeditorcode_ie_2.js文件，找到这段代码：

var quoteString = "<table style='border-right: #cccccc 1px dotted; table-layout: fixed; border-top: #cccccc 1px dotted; border-left: #cccccc 1px dotted; border-bottom: #cccccc 1px dotted' cellspacing=0 cellpadding=6 width='95%' align=center border=0>/r/n";
quoteString += "<tr><td style='word-wrap: break-word' bgcolor='#fdfddf'>/r/n<font color='#FF0000'>以下为引用的内容：</font><br>/r/n";
quoteString += "</td></tr></table>/r/n";

修改为：
var quoteString = "<span class=quote>/r/n";
quoteString += "<span>以下为引用的内容：</span>/r/n";
quoteString += "</span>/r/n";

    为了使用更少的代码，我们把CSS代码放到网页中，这样就不会每引用一次就要加入重复的CSS，首先打开文章页面的CSS文件，假设为article.css，文章正文部分包含在ID content中，找到#content ，在下面加入以下代码：

代码： /*---------------内容页:正文引用*/
#content span.quote {
 width:92%;
 display:block;
 padding:3px 10px;
 margin:10px auto;
 color:#000000;
 background:#FDFDDF;
 border:1px #cccccc dotted;
}
#content span.quote span {
 color:#FF0000;
 display:block;
}

 

然后为了实现可视化编辑，还需要再打开 FCKeditor/editor/css 目录下的 fck_editorarea.css 文件，再中间加入以下代码：

 代码：  /*---------------FCKeditor编辑预览*/
span.quote {
 width:92%;
 display:block;
 padding:3px 10px;
 margin:10px auto;
 color:#000000;
 background:#FDFDDF;
 border:1px #cccccc dotted;
}
span.quote span {
 color:#FF0000;
 display:block;
}

然后上传相应的文件即可。下面是原来用Table和DIV的对比，第一个为Table，第二个为DIV，看上去没有太大区别，但是优点却是有很多，Table布局的文字靠到边框不好看，因此在div中把padding-left和padding-right设为10px，使文字离边框有一定距离，这样更加美观。而且css和代码是分开的，这样不但节省了数据的体积，也使以后要更改引用框的颜色，文字大小，边框等变的很方便。大家完全可以根据自己网站的颜色自行设置。