WEB开发网
开发学院网页设计DivCss 修改FCKeditor引用格式为DIV+CSS的方法 阅读

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

 2010-11-29 07:24:25 来源:WEB开发网   
核心提示:可视化编辑器FCKeditor功能虽然强大,但是有些设置还是需要自行修改,修改FCKeditor引用格式为DIV+CSS的方法, 发现FCKeditor中的引用功能还是通过Table来实现,可是现在的网页一般都是用div+css来布局,文字大小,边框等变的很方便,因此现在我们也把它改成div+css 的,使其更符合xh

可视化编辑器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和代码是分开的,这样不但节省了数据的体积,也使以后要更改引用框的颜色,文字大小,边框等变的很方便。大家完全可以根据自 己网站的颜色自行设置。

 

Tags:修改 FCKeditor 引用

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接