FckEditor学习笔记

1.Fckeditor官网：http://ckeditor.com/
2.下载地址: http://ckeditor.com/download
3.文档地址: http://docs.cksource.com

一.将下载后的文件解压并放到WebRoot目录下
二.导入JS文件
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
三.使用，有四种方法来调用
1.使用JS直接创建

Js代码  

1. <script type="text/javascript">  
2. var oFCKeditor = new FCKeditor('FCKeditor1');  
3. //1.BasePath表示fckeditor的目录  
4. //第一个/表示WEBServer的根目录，所以必须加上工程路径  
5. //最后必须以/结尾，否则报错  
6. //2.可以使用相对路径如： fckeditor/  
7. oFCKeditor.BasePath = "/fckeditor/";  
8. oFCKeditor.Width = "100%";  
9. oFCKeditor.Height = 400;  
10. //默认属性 Width 100%  
11. //        Height 200  
12. //        Value ""  
13. //        ToolbarSet "Default"(Basic或自己定制)  
14. //        BasePath       /fckeditor/  
15. oFCKeditor.Create();  
16. </script>  

 

 

2.使用JS替换已有的TextArea

Js代码  

1. <script type="text/javascript">  
2. window.onload = function()  
3. {  
4. var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;  
5. oFCKeditor.BasePath = "/fckeditor/" ;  
6. oFCKeditor.ReplaceTextarea() ;  
7. }  
8. </script>  

 

<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>

 

3.

var div = document.getElementById("myFCKeditor");
var fck = new FCKeditor("myFCKeditor");
div.innerHTML = fck.CreateHtml();

 

4.使用JSP标签创建

Html代码  

1. 1.解压fckeditor-java-2.5-bin.zip  
2. 2.将解压后的fckeditor-java-core-2.5.jar 以及 lib 目录下所有jar文件拷入WEB-INF\lib目录中  
3. 3.将fckeditor-java-demo-2.5.war解压，在里面找到 slf4j-simple-1.5.8.jar文件放入WEB-INF\lib目录中  
4. 4.在JSP页面中加入 <%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>  
5. 5.在页面中加入  
6.    <!-- 这里的basePath前面的/代表的是工程根目录,各个属性如上注释 -->  
7.     <!-- 此处value不能为空，至少为一个空格字符串，否则报错 -->  
8.     <FCK:editor instanceName="myEditor" basePath="/fckeditor" height="200" value=' ' width="100%"></FCK:editor>  

 

• FCKeditor_2.6.4.1.zip (1.3 MB)
• 下载次数: 64

• fckeditor-java-2.5-bin.zip (1.6 MB)
• 下载次数: 37

• fckeditor-java-demo-2.5.war (1.3 MB)
• 下载次数: 92

FckEditor的主配置文件为 fckconfig.js,但一般不更改它而是创建一个附加的配置文件myConfig.js,文件需为UTF-8编码保存
1.创建myConfig.js并放在工程目录的WebRoot下，并放置以下内容

//自动检测浏览器语言，当为false时，使用下面默认语言
//en-英语 fr-法语 zh-cn中文
FCKConfig.AutoDetectLanguage = true ;
FCKConfig.DefaultLanguage = 'en' ;

2.配置附加文件，两种方法
第一种：修改fckconfig.js
FCKConfig.CustomConfigurationsPath = '/工程名/myConfig.js' ;
第二种：在创建的时候传入参数
var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;
oFCKeditor.Config["CustomConfigurationsPath"] = "/工程名/myconfig.js"  ;
oFCKeditor.Create() ;
为了队止浏览器缓存可以用下面方法
var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;
oFCKeditor.Config["CustomConfigurationsPath"] = "/myconfig.js?" + ( new Date() * 1 ) ;
oFCKeditor.Create() ;

 

二。自定义工具集
帮助文档：http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Configuration/Toolbar
参照fckconfig.js中的FCKConfig.ToolbarSets["Default"]
'-'为一个分隔符 '/'为换行
可以把代码拷到myconfig.js中，并对照界面去掉相应的配置。

 

三。自定义字体
拷贝FCKConfig.FontNames到myconfig.js中，如增加 宋体;黑体;楷体

 

四。修改回车换行
FCKConfig.EnterMode = 'p' ;  // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br

 

五。配置表情图片
//修改fckeditor/dialog/fck_smiley.html 里dialog.SetAutoSize( false ) ;并且设置 body style="overflow: hidden" -> auto
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/qq/' ;
FCKConfig.SmileyImages = ['0.gif','1.gif','10.gif','100.gif','101.gif','102.gif','103.gif','104.gif','105.gif','106.gif','107.gif','108.gif','109.gif','11.gif','110.gif','111.gif','112.gif','113.gif','114.gif','115.gif','116.gif','117.gif','118.gif','119.gif','12.gif','120.gif','121.gif','122.gif','123.gif','124.gif','125.gif','126.gif','127.gif','128.gif','129.gif','13.gif','130.gif','131.gif','132.gif','133.gif','134.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','2.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','3.gif','30.gif','31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','4.gif','40.gif','41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','5.gif','50.gif','51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','6.gif','60.gif','61.gif','62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','7.gif','70.gif','71.gif','72.gif','73.gif','74.gif','75.gif','76.gif','77.gif','78.gif','79.gif','8.gif','80.gif','81.gif','82.gif','83.gif','84.gif','85.gif','86.gif','87.gif','88.gif','89.gif','9.gif','90.gif','91.gif','92.gif','93.gif','94.gif','95.gif','96.gif','97.gif','98.gif','99.gif'] ;
//每行显示几个表情
FCKConfig.SmileyColumns = 8 ;
//图片的宽度和高度
FCKConfig.SmileyWindowWidth     = 500 ;
FCKConfig.SmileyWindowHeight = 400 ;