FCKeditor HTML 在线编辑器 JAVA 版 使用小记

Question

我们的项目中有一个 BLOG 功能需要一个HTML 在线编辑器，决定使用 FCKeditor 这个开源免费控件,安装设置方法主要参照网上文章： 在jsp环境中配置使用FCKEditor
首先去官方网站 http://www.fckeditor.net/download  下载包：需要下载2个包，一个是主文件， 一个是和 JSP，JAVA 集成的包，下载页面分成上下两部分，在上面下载了最新版本： FCKeditor_2.5.zip在下面是和 。NET，JAVA 等的集成包，进入 JAVA，选择JAVA集成包的最新版本：FCKeditor-2.3.zip
解压FCKeditor_2.5.zip,(FCKeditor主文件)，将fckeditor目录复制到网站根目录下，注意和“ 在jsp环境中配置使用FCKEditor” 文章中提到的不一样， 不是 FCKeditor目录，是 fckeditor 目录，以下的修改配置等都要修改成 fckeditor 目录。
解压FCKeditor-2.3.zip,(jsp,FCKeditor整合包)，将FCKeditor-2.3/web/WEB-INF/web.xml中的两个servlet,servlet-mapping定义复制到自已项目的web.xml文件中
修改<servlet-mapping>  
        <servlet-name>Connector</servlet-name>  
        <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>  
    </servlet-mapping>      <servlet-mapping>  
        <servlet-name>SimpleUploader</servlet-name>  
        <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>  
 </servlet-mapping> 
　　为<servlet-mapping>  
        <servlet-name>Connector</servlet-name>  
        <url-pattern>/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>  
    </servlet-mapping>      <servlet-mapping>  
        <servlet-name>SimpleUploader</servlet-name>  
        <url-pattern>/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>  
  </servlet-mapping> 将FCKeditor-2.3/web/WEB-INF/lib目录下文件复制到自已项目的lib文件夹中，
然后按照“ 在jsp环境中配置使用FCKEditor” 文章中所说：在需使用FCKeditor的jsp界面中加入：// 文件开头处加入  
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>  
//要使用的地方加入  
<FCK:editor id="content" basePath="/FCKeditor/"  
                                imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
                                linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
                                flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
                                imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
                                linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
                                flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">  
            this is default content :)  
</FCK:editor> 运行后，页面出现错误：HTTP Status 404 - /fckeditor/editor/fckeditor.html--------------------------------------------------------------------------------type Status reportmessage /fckeditor/editor/fckeditor.htmldescription The requested resource (/fckeditor/editor/fckeditor.html) is not available.
--------------------------------------------------------------------------------Apache Tomcat/5.0.28
于是在 FCKeditor-2.3/web/_samples/jsp  中的例子中找到了 JSP 的用法，修改为：<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;
oFCKeditor.setBasePath("/fckeditor/" ) ;
oFCKeditor.setValue( "This is some <strong>sample text</strong>. You are using <a href=\"http://www.fredck.com/fckeditor/\">FCKeditor</a>." );
out.println( oFCKeditor.create() ) ;
%>但依然报错误：
HTTP Status 404 - /fckeditor/editor/fckeditor.html--------------------------------------------------------------------------------type Status reportmessage /fckeditor/editor/fckeditor.htmldescription The requested resource (/fckeditor/editor/fckeditor.html) is not available.
--------------------------------------------------------------------------------Apache Tomcat/5.0.28
后来将fckeditor 目录重命名为 qq, 一试，结果依然报错：HTTP Status 404 - /fckeditor/editor/fckeditor.html--------------------------------------------------------------------------------type Status reportmessage /fckeditor/editor/fckeditor.htmldescription The requested resource (/qq/editor/fckeditor.html) is not available.
--------------------------------------------------------------------------------Apache Tomcat/5.0.28

Answer 1

我们的项目中有一个 BLOG 功能需要一个HTML 在线编辑器，决定使用 FCKeditor 这个开源免费控件,安装设置方法主要参照网上文章： 在jsp环境中配置使用FCKEditor
首先去官方网站 http://www.fckeditor.net/download  下载包：需要下载2个包，一个是主文件， 一个是和 JSP，JAVA 集成的包，下载页面分成上下两部分，在上面下载了最新版本： FCKeditor_2.5.zip在下面是和 。NET，JAVA 等的集成包，进入 JAVA，选择JAVA集成包的最新版本：FCKeditor-2.3.zip
解压FCKeditor_2.5.zip,(FCKeditor主文件)，将fckeditor目录复制到网站根目录下，注意和“ 在jsp环境中配置使用FCKEditor” 文章中提到的不一样， 不是 FCKeditor目录，是 fckeditor 目录，以下的修改配置等都要修改成 fckeditor 目录。
解压FCKeditor-2.3.zip,(jsp,FCKeditor整合包)，将FCKeditor-2.3/web/WEB-INF/web.xml中的两个servlet,servlet-mapping定义复制到自已项目的web.xml文件中
修改<servlet-mapping>  
        <servlet-name>Connector</servlet-name>  
        <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>  
    </servlet-mapping>      <servlet-mapping>  
        <servlet-name>SimpleUploader</servlet-name>  
        <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>  
 </servlet-mapping> 
　　为<servlet-mapping>  
        <servlet-name>Connector</servlet-name>  
        <url-pattern>/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>  
    </servlet-mapping>      <servlet-mapping>  
        <servlet-name>SimpleUploader</servlet-name>  
        <url-pattern>/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>  
  </servlet-mapping> 将FCKeditor-2.3/web/WEB-INF/lib目录下文件复制到自已项目的lib文件夹中，
然后按照“ 在jsp环境中配置使用FCKEditor” 文章中所说：在需使用FCKeditor的jsp界面中加入：// 文件开头处加入  
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>  
//要使用的地方加入  
<FCK:editor id="content" basePath="/FCKeditor/"  
                                imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
                                linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
                                flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
                                imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
                                linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
                                flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">  
            this is default content :)  
</FCK:editor> 运行后，页面出现错误：HTTP Status 404 - /fckeditor/editor/fckeditor.html--------------------------------------------------------------------------------type Status reportmessage /fckeditor/editor/fckeditor.htmldescription The requested resource (/fckeditor/editor/fckeditor.html) is not available.
--------------------------------------------------------------------------------Apache Tomcat/5.0.28
于是在 FCKeditor-2.3/web/_samples/jsp  中的例子中找到了 JSP 的用法，修改为：<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;
oFCKeditor.setBasePath("/fckeditor/" ) ;
oFCKeditor.setValue( "This is some <strong>sample text</strong>. You are using <a href=\"http://www.fredck.com/fckeditor/\">FCKeditor</a>." );
out.println( oFCKeditor.create() ) ;
%>但依然报错误：
HTTP Status 404 - /fckeditor/editor/fckeditor.html--------------------------------------------------------------------------------type Status reportmessage /fckeditor/editor/fckeditor.htmldescription The requested resource (/fckeditor/editor/fckeditor.html) is not available.
--------------------------------------------------------------------------------Apache Tomcat/5.0.28
后来将fckeditor 目录重命名为 qq, 一试，结果依然报错：HTTP Status 404 - /fckeditor/editor/fckeditor.html--------------------------------------------------------------------------------type Status reportmessage /fckeditor/editor/fckeditor.htmldescription The requested resource (/qq/editor/fckeditor.html) is not available.
--------------------------------------------------------------------------------Apache Tomcat/5.0.28

Answer 2

于是明白，是这个文件访问不到，看来还是路径有问题，于是修改路径，前面加上：request.getContextPath() 就可以访问到了。
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;
oFCKeditor.setBasePath( request.getContextPath() + "/fckeditor/" ) ;
oFCKeditor.setValue( "This is some <strong>sample text</strong>. You are using <a href=\"http://www.fredck.com/fckeditor/\">FCKeditor</a>." );
out.println( oFCKeditor.create() ) ;
%>
页面显示出来了，接下来要开始编写JAVA程序，实现保存和显示功能了：根据 FCKeditor-2.3.zip JAVA 集成包中的，_samples 目录下的例子，实现了功能。修改 ACTION：String contentString = (String)request.getParameter("EditorDefault");   //"EditorDefault"是控件默认的提交参数名
System.out.println("***************");
System.out.println("contentString="+contentString);
bc.setContent(contentString);这样就得到了控件中提交的值，是一个字符串，例如：<p><span style="font-family: Comic Sans MS">we </span><span style="background-color: lime">are </span><span style="font-size: medium">friends</span></p>就可以保存到数据库里去了。为了在页面控件中显示出来，修改 ACTION：request.setAttribute("contentString", bc.getContent());修改 JSP： <%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;
oFCKeditor.setBasePath( request.getContextPath() + "/fckeditor/" ) ;
String contentString = (String) request.getAttribute("contentString");
if(contentString != null)
oFCKeditor.setValue( contentString );
out.println( oFCKeditor.create() ) ;
%>
如果需要修改默认的参数名："EditorDefault"则只需要修改 JSP 里的代码，将：oFCKeditor = new FCKeditor( request, "EditorDefault" ) ;修改为：oFCKeditor = new FCKeditor( request, "contentString" ) ;接着按照“ 在jsp环境中配置使用FCKEditor” 文章中的方法进行瘦身。最后开始配置工具栏，工具栏的配置主要是对 fckeditor 目录下的 fckconfig.js 进行修改。可以在网上搜索‘fckconfig.js’或者 ‘FCK 工具栏’，找到一篇文章：FCK编辑器精简工具栏fckconfig.js  中关于工具栏的设置原始为：FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
文章里精简为：//默认编辑器工具栏设置
FCKConfig.ToolbarSets["Default"] = [
['Source'],['PasteText','PasteWord','-'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','ShowBlocks'],
'/',
['Bold','Italic','Underline','StrikeThrough'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink'],['TextColor','BGColor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['FontFormat','FontName','FontSize'],

] ;
最后我去除了一些功能，精简为：FCKConfig.ToolbarSets["Default"] = [
['PasteText','PasteWord','-'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['Link','Unlink'],['TextColor','BGColor'],
['Table','Rule','SpecialChar','PageBreak'],
'/',
['Bold','Italic','Underline','StrikeThrough'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['FontFormat','FontName','FontSize'], 
] ;
注意里面可以任意变换顺序， '/', 代表分行， 一个 [] 里的内容为一个集中区域。
好了,希望这篇文章对需要的人有帮助.

Answer 3

路径问题
http://www.51j2ee.com/bill/?1955

Answer 4

我这有个已经弄好了的,需要的话,可以给你发过去.JDK1.5的.
MSN:[email protected]

Answer 5

其实通过研究 FCKeditor oFCKeditor ; 类， 发现也可以不需要修改 fckconfig.js，可以在程序中动态的设置工具栏：oFCKeditor.setToolbarSet("");  可以实现动态改变工具栏的功能。
另外要设置编辑器的长度，宽度， 也可以通过这个类实现：oFCKeditor.setHeight("300");

Answer 6

老实说，这玩意难的是部署在linux上时的访问权限
有Windows上很简单的，网上随便搜索一下应该就能搞定

Answer 7

http://download.csdn.net/source/459322
下载.For Java JSP的问题全解决了.是2.6的支持Ajax

Answer 8

请教朋友们，有段代码，想请朋友帮忙修改下，可以吗？？？
外部调用很多的JS文件，请愿意帮忙的朋友加QQ：10056572
万分感谢！！！

Answer 9

学习了 我现在有一个编辑器在用 在linux服务器编辑器上传的图片不出来