FCKeditor经验总结

置顶 huangxuestarrysky

于 2013-06-24 23:23:28 发布

阅读量1.1k

点赞数

分类专栏： FCKeditor

本文链接：https://blog.csdn.net/huangxuestarrysky/article/details/9166269

版权

FCKeditor 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

官网:www.fckeditor.net
http://docs.cksource.com
开发者文档http://docs.cksource.net/FCKeditor-2.x/Developers_Guide
需要下载的资料:
fckeditor-java-2.4-bin.zip
注释:fckeditor文档site/index.html

FCKeditor-2.6.3.zip
注释:提供的例子_samples/default.html

源码：fckeditor-java-2.4-src.zip

演示工程fckeditor-java-demo-2.4.war

调用fckeditor的方法：
1利用js调用
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
2在jsp中利用自定义标签调用

参考文档
1：FCKeditor-2.6.3.zip里_samples/default.html例子
2:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/JavaScript（此文档很重要，自己写代码时要注意查看）

js调用的几种方法:
方法一：
步骤一：将FCKeditor-2.6.3.zip解压后的文件放在webroot下
步骤二:引入其中的js文件
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
步骤三：
直接在body中写如下代码
<script type="text/javascript">
var oFCKeditor=new FCKeditor('FCKeditor1');
//项目路径：//http://localhost:8080/test/fckeditor
//BasePath一定要以/结尾
oFCKeditor.BasePath="/test/fckeditor/";
oFCKeditor.Create();
</script>

方法二：
步骤一：将FCKeditor-2.6.3.zip解压后的文件放在webroot下
步骤二:引入其中的js文件
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
步骤三:
首先在head中写入如下东东
<script type="text/javascript">
window.οnlοad=function(){
   var oFCKeditor=new FCKeditor('MyTextarea');//此处为TEXTAREA的name或者id值
  //项目路径：//http://localhost:8080/test/fckeditor
  //BasePath一定要以/结尾
  oFCKeditor.BasePath="/test/fckeditor/";
//  //或者用相对路径,相当于当前页面的相对路径
  //oFCKeditor.BasePath="fckeditor/";
  oFCKeditor.ReplaceTextarea();
}
</script>
然后在body中写入如下东东
<TEXTAREA row="4" cols="60" name="MyTextarea"></TEXTAREA>
注意：
FKCeditor的属性
Width Height Value ToolbarSet BasePath

在jsp中利用自定义标签调用
步骤一：将fckeditor-java-core-2.4.jar（核心架包）放在lib下
将lib目录下的jar包放在lib下
额外加这个架包 slf4j-simple-1.5.2.jar
步骤二：在jsp页面引入如下代码,其中basePath的第一个/表示当前工程的目录
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>

<FCK:editor instanceName="myEditor" basePath="/fckeditor/" value="this is FCKeditor"></FCK:editor>
注意：1此时value属性必须指定值,并且值不能是空字符串
2basePath以/开头，此/带白哦当前工程的路径

FCKeditor的配置文件
文件路径：FCKeditor-2.6.3.zip解压后fckeditor/editor/fckconfig.js
但是我们弄配置文件时通常写一个额外的配置文件myconfig.js覆盖FCKeditor的配置文件（fckconfig.js）
步骤一：在WebRoot下新建一个普通文件myconfig.js(因为重写的是js脚本)
步骤二：修改页面工具栏的语言方法，
方法一：在myconfig.js中配置如下
FCKConfig.AutoDetectLanguage=false;//自动检测语言，false时语言为英文
FCKConfig.DefaultLanguage="fr"//当上面的配置为true时，此时重新设置自动检测语言

在FCKeditor的配置文件（fckconfig.js）中把FCKConfig.CustomConfigurationsPath的值修改为覆盖文件的路径
FCKConfig.CustomConfigurationsPath="/test/myconfig.js"

方法二:在jsp文件中配置oFCKeditor的属性
oFCKeditor.config["CustomConfigurationsPath"]="/test/myconfig.js"
总结：配置FCKeditor的三种方法;
方法一：直接在FCKeditor-2.6.3.zip解压后fckeditor/editor/fckconfig.js中修改
方法二:定义单独的配置文件myconfig.js
方法三：在Jsp页面中配置FCKeditor的对象
注意：如果都配置了，则加载顺序是fckconfig.js---myconfig.js--Jsp页面中配置FCKeditor的对象

一般需要修改的配（不管修改哪个，先从fckconfig.js中拷贝出原来的到myconfig.js中，然后修改myconfig.js）
1.自定义工具集
      首先在myconfig.js中定义一个名字为itcastbbs的工具集。FCKConfig.ToolbarSets["itcastbbs"]=['各种工具'];
      然后在fckconfig.js中引用刚才定义的工具集。方法修改CustomConfigurationsPath的路径FCKConfig.CustomConfigurationsPath='/test/myconfig.js'
      再在jsp文件中利用FCKeditor的对象oFCKeditor.ToolbarSet="itcastbbs";
2.加上几种常用字体
      首先在myconfig.js中定义一个字体样式FCKConfig.FontNames='字体名称';
     注意：如果保存不了是由于刚才新建的myconfig.js文件不是utf-8字符编码集，修改方法：右击该文件-propertiy-把other选中改为utf-8
3.修改shift+回车的换行行为
      首先在fckconfig.js中复制这两项
FCKConfig.EnterMode='p'; //p|div|br
FCKConfig.ShiftEnterMode='br';//p|div|br
      在myconfig.js中粘贴过来并修改为：
FCKConfig.EnterMode='br'; //p|div|br
FCKConfig.ShiftEnterMode='p';//p|div|br
4修改编辑区样式文件
      首先在fckconfig.js中找到FCKConfig.EditorAreaCSS=FCKConfig.BasePath+'css/fck_editorarea.css
      然后根据此路径找到该文件
5更换表情文件
      首先在fckconfig.js中找到
FCKConfig.SmileyPath=FCKConfig.BasePath+'images/smiley/msn/';//表示表情图片所在的路径
FCKConfig.SmileyImages=['','','',''......];//配置上面路径下的要显示的哪些图片（图片名称）
FCKConfig.SmileColumns=;每行显示的表情文件
FCKConfig.SmileWindowWidth
FCKConfig.SmileWindowHeight
并且拷贝到myconfig.js中
注意：当图片过多时长度和宽度要重新设置甚至加上滚动条
  方法：首先右击该页面--选择属性，根据属性中的路径找到fckeditor中配置表情的文件如：fck_siiley.html
   将其中的dialog.SetAutoSize(true);注释掉
   此时长度和宽度已经设置好，但是图片过多有些图片没显示出来则需要增加滚动条
      注：增加滚动条的方法
    找到<body style="overflow:hidden">且将其改为<body style="overflow:auto">

注意：myconfig.js最好放在fckeditor文件夹下，此时则需要修改访问myconfig.js的路径
fckeditor有个属性BasePath指的是fckeditor中editor文件夹的属性，若将myconfig.js放在fckeditor中editor文件夹下,myconfig.js的路径则可以表示为：BasePath+"myconfig.js"
fckeditor有个属性EditorPath指的是fckeditor自己的路径，若将myconfig.js放在fckeditor中editor文件夹下,myconfig.js的路径则可以表示为：FCKConfig.EditorPath+"myconfig.js"
在myconfig.js中修改FCKConfig.CustomConfigurationsPath=FCKConfig.EditorPath

6文件上传：资料在fckeditor-java-2.4.1-bin\fckeditor-java-2.4.1\site\index.html中
首先从上面的路径中找到该页面，点击左边的connector,然后复制到web.xml里面
<servlet>
      <servlet-name>Connector</servlet-name>
        <servlet-class>
          net.fckeditor.connector.ConnectorServlet
      </servlet-class>
      <load-on-startup>1</load-on-startup>
    </servlet>
    ...
    <servlet-mapping>
      <servlet-name>Connector</servlet-name>
      <url-pattern>
        /fckeditor/editor/filemanager/connectors/*
      </url-pattern>
    </servlet-mapping>
    然后在src下面创建一个名为fckeditor.properties 的文件，将下列代码复制到其中
  connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

注意：使用文件上传时可能会遇到一下几个问题
  1上传文件的名字为中文时可能出现乱码
   首先弄清是在服务器端保存的文件名就是乱码还是在网页显示时是乱码
    步骤：1查看fckeditor/editor/filemanager/browser/default/framupload.html中设置的编码
          2找到服务器端处理文件根据web.xml中的servlet-class找到jar包，导入源码fckeditor-java-2.4-src.zip
     3ctrl+o找到dopost方法（因为使用文件上传肯定是使用dopost方法）
       找到List<FileItem> items=upload.parseRequest(request);需要在此之前设置编码。
       但是此文件是修改不了的，可以将此文件全部copy，然后在src下新建一个名ConnectorServlet为的类，把copy的代码放到其中,
      为了使用它必须修改web.xml,将上面复制过去的servlet中的servlet-class路径修改为新建类的路径
       然后再在新建类中找到List<FileItem> items=upload.parseRequest(request) 且在上面设置upload.setHeaderEncoding("UTF-8");
  2创建中文名目录时会出现乱码
    步骤：1查看fckeditor/editor/filemanager/browser/default/frmcreatefolder.html中设置的编码
     在fckeditor/editor/filemanager/browser/default/中找到browser.html然后找到SendCommand方法，再在其中找到sUrl，然后alert(sUrl);
     然后刷新找到插入图像按钮，找到craeate new folder
          2重复上面步骤2然后ctrl+O找到doget方法，找到String newFolderStr=UtilsFile.sanitizeFolderName(request.getParameter("NewFolderName"));
     重新定义String tempStr=request.getParameter("NewFolderName");
      tempStr=new String(tempStr.getBytes("iso8859-1"),"UTF-8");
      String newFolderStr=UtilsFile.sanitizeFolderName(tempStr);
  3引用中文名的图片不能显示、
    方法一：修改tomcat连接器的配置(原因：当直接访问该图片时是用的iso8859-1会出现乱码只有改成utf-8时才能正确访问该图片)
     1将服务器停止
     2进入tomcat/conf目录找到server.xml,找到
      <Connector part="8080" protecol="HTTP/1.1"
       connectionTimeout="20000"
       redirectPort="8443"/>
      在其中增加URIEncoding="UTF-8"
      注意;此方法会导致重新创建文件夹时会出现乱码，不建议使用
    方法二：重复上面步骤2然后ctrl+O找到dopost方法，找出保存文件的代码
      File pathToSave=new File(currentDir,fileName);
      再找到其中的fileName,将其改为不包含中文的英文名字
       fileName=UUID.randomUUID().toString() +"."+extension
  4控制上传文件类型（FCKeditor把上传的文件分成4类：File Image Flash Media）
   步骤：1找到default.properties(Referenced Libraies/fckeditor-java-core-2.4.jar-net.fckeditor.handles-default.properties
    2在上面找到的文件中搜索connector.resourceType,Image上面四种类型的一个（自己想修改的类型）
     将其拷贝到fckeditor.properties中，将其值增加或者修改
    3修改客户端的配置文件
     方法：在fckconfig.js中找到FCKConfig.ImageUploadAllowedExtensions=".(jpg|gif|jpeg|png|bmp)$";
      将其复制到myconfig.js中
  5控制允许上传的文件的大小
   方法：先修改服务端
    找到1中上传文件的名字为中文时可能出现乱码定义的ConnectorServlet类，然后在该类中的dopost方法中找到
     String extension=FilenameUtils.getExtension(fileName);它下面的if-else分别表示如果这个文件的扩展名不允许上传和如果不存在以上情况则保存文件
    在else之前增加一个
     else if(upFile.getSize()>1024*10){//如果文件大小超过10k
      //传递一个自定义的错误码
       ur=new UploadResponse(204);
     }
    再修改客户端
     找到如下路径editor/dialog/fck_image/fck_image.js的文件增加一个204的错误码
     case 204:
      alert("文件大小超出限制");
      return;
     注意：先将该文件编码改为 utf-8
    当进行浏览服务器上传操作时到了含有 Create New Folder按钮时也会报204错误，右击该页面找到该页面的文件路径找到其页面fckeditor/editor/filemanager/browser/default/frmupload.html
     原因；他们用的是同一个servlet但页面跟上面修改的页面不是同一个

例子：将fckeditor应用到论坛里面
先创建一个名为context的textarea
然后再在其下面引入以下内容
应用程序路径${pageContext.request.contextPath}/fckeditor/fckeditor.js
<script type="text/javascript" src="${pageContext.request.contextPath}/fckeditor/fckeditor.js">
var myEditor=new FCKeditor("content");
myEditor.BasePath="${pageContext.request.contextPath}/fckeditor/";
myEditor.ReplaceTextarea();
</script>
1修改编辑区样式
首先找到fckeditor样式文件fckeditor/editor/fck_editorarea.css
然后只需要将自己定义的样式拷贝到上面文件下即可
此时需要维护两个css不方便，可以将自己定义的css文件引入到fck_editorarea.css中
在fck_editorarea.css中引入@import url(要引入的文件相当于fck_editorarea.css的路径);
2自定义工具集
首先找到myconfig.js找到FCKConfig.ToolbarSets["工具集名字"]=[]我们可以去掉其中一些功能选项
然后在需要调用fckeditor的jsp页面中myEditor.ToolbarSet="工具集名字"
3去掉fckeditor中浏览服务器按钮，首先右击找到该页面路径为：fckeditor/editor/dialog/fck_image.html
ctrl+shift+r查找zh-cn.js-itcastForum/WebRoot/fckeditor/editor/lang 再ctrl+f查找“浏览服务器”
其对应的值为DlgBtnBrowseServer:"浏览服务器"，然后在fck_image.html中找到DlgBtnBrowseServer将其整个按钮注释掉

huangxuestarrysky

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
FCKeditor经验总结

官网:www.fckeditor.net http://docs.cksource.com开发者文档http://docs.cksource.net/FCKeditor-2.x/Developers_Guide需要下载的资料:fckeditor-java-2.4-bin.zip注释:fckeditor文档site/index.htmlFCKeditor-2.6.3.
复制链接

扫一扫