`
wgcode
  • 浏览: 578760 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

FckEditor学习笔记

    博客分类:
  • Java
阅读更多

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 ;

 

分享到:
评论

相关推荐

    FCKeditor 学习笔记

    FCKeditor 学习笔记

    fckeditor学习笔记

    fckeditor学习笔记 FCKEditor的调用: 方法一:通过javascript调用(前提是在head里要引入&lt;script type="text/javascript" src="fckeditor/fckeditor.js"&gt;文件) 1.创建并输出一个编辑器(参见fckeditortest项目test1...

    FCKEDITOR学习笔记资料.pdf

    FCKEDITOR学习笔记资料.pdf

    FCKEditor 笔记

    FCKEditor 学习笔记 这可是我精心写的哦,相信对你有帮助 里面详细写了一些在 J2EE 开发中所遇到的问题以及解决方法

    FCKeditor 使用笔记

    FCKeditor在线编辑器的使用笔记,jsp 中使用

    传智播客 fckeditor 笔记

    这是我自己整理的传智播客里的FCKeditor控件的使用,以及笔记。。。。。。。。。。。要是大家喜欢,可以拿去

    Fckeditor学习研究整理笔记

    NULL 博文链接:https://whp0731.iteye.com/blog/354313

    Fckeditor皮肤Fckeditor皮肤

    Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤

    FCKeditor.Net_2.6.3.zip和FCKeditor-v2.6.3

    FCKeditor.Net_2.6.3.zip和FCKeditor-v2.6.3

    fckeditor源文件和demo

    fckeditor 源码 demo fckeditor 源码 demo fckeditor 源码 demo fckeditor 源码 demo

    fckeditor2.6.3 完整版

    2.解压缩到你的站点根文件夹中名为FCKEDITOR的文件夹中(名称必须为FCKEDITOR,因为配置文件中已经使用此名称来标示出FCKEDITOR的位置) 3.现在,编辑器就可以使用了,如果想要查看演示,可以按下面方法访问: ...

    fckEditor,fckEditor

    fckEditor,fckEditor,fckEditor

    FCKeditor

    FCKeditor上传图片 FCKeditor配置 FCKeditor在jsp中使用 ,加载到myeclipse 中就可以跑起来,源码很清晰

    FCKeditor使用指南

    1 FCKeditor的下载及介绍 4 1.1 下载地址 4 1.2 FCKeditor下载包的介绍 4 2 FCKeditor的目录和文件精简 4 3 在页面创建FCKeditor 4 3.1 Js创建FCKeditor实例: 4 3.1.1 方法一:内嵌方法(推荐) 4 3.1.2 方法二:替换...

    FCKeditor开发jar包及fckeditor文件夹

    FCKeditor开发jar包及fckeditor文件夹

    FCKeditor2.6.4使用说明

    1 FCKeditor简介: FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等...

    最新FCKeditor_2.6 版本 FCKeditor编辑器和控件

    兼容目前的浏览器 里面包含FCKeditor编辑器和控件 一、集成方法 FCKeditor应用在ASP.NET上,需要两组文件,一组是FCKeditor本身,另一个是用于ASP.NET的FCKeditor控件(分为1.1和2.0两个版本,这里使用2.0版本)。 ...

    fckeditor api

    fckeditor api fckeditor api fckeditor api fckeditor api fckeditor api fckeditor apifckeditor api

    Fckeditor(综合利用工具)

    Fckeditor(综合利用工具)

    fckeditor 完整示例

    fckeditor 完整示例 samples

Global site tag (gtag.js) - Google Analytics