`
wgcode
  • 浏览: 599484 次
  • 性别: 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简介】 FCKeditor是一款基于JavaScript的开源富文本编辑器,它以其功能强大、配置简单、跨浏览器兼容性好以及支持多种编程语言(如Java、ASP、PHP等)而受到广泛关注。这款编辑器允许用户在网页上实现...

    Fckeditor学习研究整理笔记

    这个"**Fckeditor学习研究整理笔记**"可能是某位开发者或博主对其深入研究后整理的一份详细资料,旨在帮助其他人更好地理解和使用FCKeditor。虽然具体的笔记内容无法直接查看,但从标题和标签我们可以推测其主要涵盖...

    传智播客 fckeditor 笔记

    **传智播客FCKeditor笔记** FCKeditor是一款开源的网页文本编辑器,它允许用户在网页上编辑内容,类似于Microsoft Word的功能,但适用于Web环境。这款编辑器以其丰富的功能、良好的兼容性和易于集成而受到开发者的...

    FCKEditor 笔记

    这篇学习笔记将详细介绍如何在项目中集成和配置FCKEditor,以及解决在使用过程中可能遇到的问题。 首先,引入FCKEditor到J2EE项目中,你需要在JSP页面中添加相应的标签库引用。例如,添加以下代码: ```jsp ...

    fck学习笔记一些相关实例

    本学习笔记包含了FCKeditor的一些实际使用案例,旨在帮助开发者更好地理解和运用这款工具。 首先,我们要了解FCKeditor的基本结构和配置。FCKeditor由JavaScript编写,可以通过简单的HTML代码引入到页面中。它的...

    Java学习笔记,spring,hibernate,struts

    Java学习笔记涵盖了多个核心的Java开发技术,包括Spring、Hibernate和Struts,这些都是Java Web开发中的重要框架。让我们深入探讨一下这些技术。 首先,Java是一种广泛使用的编程语言,以其跨平台性和面向对象的...

    JavaEE学习实战笔记心得

    ### JavaEE学习实战笔记心得 #### JavaSE基础要点 - **环境配置**: - **JDK下载与安装**:确保下载与操作系统相匹配的JDK版本,完成安装。 - **环境变量设置**: - **JAVA_HOME**: 指向JDK的安装目录。 - **...

    faceditor 精简版 最流行的在线编辑器

    在开始使用FCKeditor之前,建议参考“在线编辑器fckeditor学习”的学习笔记,其中可能会包含安装步骤、配置方法以及常见问题的解决策略。这将帮助用户更好地理解和掌握FCKeditor的使用,从而提高工作效率。 总的来...

    博客系统笔记以及源码

    中科院java培训的案例—博客系统,主要用jsp和servlet实现,其中涉及DButils,mysql数据库连接池,FCKeditor,PowerDesigner,startUML等的使用。很值得学习。

    第14章 项目实训:个人笔记系统笔记管理模块的实现.ppt

    Java Web基础与实例教程的PPT,自己制作的PPT,将近400页,免费分享,童鞋们努力学习吧。

    第12章 项目实训:个人笔记系统首页模块的设计与实现.ppt

    Java Web基础与实例教程的PPT,自己制作的PPT,将近400页,免费分享,童鞋们努力学习吧。

    asp网站后台源码

    这个ASP企业站源码提供了一个学习和实践ASP开发的平台,你可以通过深入研究每个文件夹和文件,了解如何实现网站功能,以及如何维护和扩展ASP应用程序。同时,这也是一个了解Web开发流程、数据库管理和网络安全的好...

Global site tag (gtag.js) - Google Analytics