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的主配置文件为 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 ;

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值