jsp中配置 FCKeditor2.3
现在已经升级成CKeditor了 不过这方面的教程不是很多，也没啥时间去弄，所以找了以前的文章学习了一下，先记录如下。
1.下载
FCKeditor2.3 (FCKeditot for java) 包括了相应的jar文件 源码 以及editor及配置文件
2.建立项目:
建立项目FCKeditor_Demo
3.将FCKeditor2.3解压缩,将整个目录editor复制到项目的Webroot下
将fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 文件夹到项目中的 WebRoot 目录
将"web\WEB-INF\lib 下的两个 jar 文件到项目的 WebRoot"WEB-INF"lib 目录
将其中的 "src 下的 FCKeditor.tld 文件到项目的 WebRoot"WEB-INF 目录
4.项目的web.xml修改如下(可从web目录WEB-INF中获取web.xml)
FCKConfig.ImageBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;
FCKConfig.FlashBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;
6.其它
fckconfig.js总配置文件，可用记录本打开，修改后将文件存为utf-8 编码格式。找到：
FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。
如果你的编辑器还用在网站前台的话，比如说用于留言本或是日记回复时，那就不得不考虑安全了，
在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，
也就是基本的toolbar，找到：
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-',
'Smiley','SpecialChar','Replace','Preview'] ] ;
这是改过的Basic，把图像功能去掉，把添加链接功能去掉，因为图像和链接和flash和图像按钮添加功能都能让前台
页直接访问和上传文件， fckeditor还支持编辑域内的鼠标右键功能。
FCKConfig.ContextMenu = ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',
/*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'] ;
这也是改过的把鼠标右键的“链接、图像，FLASH，图像按钮”功能都去掉。
找到： FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
加上几种我们常用的字体
FCKConfig.FontNames
= '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
7.<%--
三种方法调用FCKeditor
1.FCKeditor自定义标签 (必须加头文件 <%@ taglib uri="/TestFCKeditor" prefix="FCK" %> )
2.script脚本语言调用 (必须引用 脚本文件 <script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script> )
3.FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %> )
--%>
//标签调用方式
<%--
<form action="show.jsp" method="post" target="_blank">
<FCK:editor id="content" basePath="/FCKeditor_Demo/"
width="700"
height="500"
skinPath="/FCKeditor_Demo/editor/skins/silver/"
toolbarSet = "Default"
>
input
</FCK:editor>
<input type="submit" value="Submit">
</form>
--%>
//JS调用方式
<form action="show.jsp" method="post" target="_blank">
<table border="0" width="700"><tr><td>
<textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('content') ;
oFCKeditor.BasePath = "/FCKeditor_Demo/" ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
</script>
<input type="submit" value="Submit">
</td></tr></table>
</form>
//FCKeditor API 调用
<%--
<form action="show.jsp" method="post" target="_blank">
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "content" ) ;
oFCKeditor.setBasePath( "/FCKeditor_Demo/" ) ;
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type="submit" value="Submit">
</form>
--%>
只测试并成功了script方法~
8.上传文件的时候是调用FCKeditor.jar中的Servlet 可以将src中的源码拷贝到工程中，方便功能的修改
9.web.xml中
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage="" 缺省语言
EditorAreaCss="" 编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors="" 设置显示颜色拾取器时文字颜色列表
FontFormats="" 设置显示在文字格式列表中的命名
FontNames="" 字体列表中的字体名
FontSizes="" 字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本
ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体
FormatIndentator="" 当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码
FormatSource=true/false 在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能
ImageBrowserURL="" 浏览服务器时运行的URL
ImageBrowserWindowHeight="" 图像浏览器窗口高度
ImageBrowserWindowWidth="" 图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器
LinkBrowserURL="" 插入链接时浏览服务器的URL
LinkBrowserWindowHeight=""链接目标浏览器窗口高度
LinkBrowserWindowWidth=""链接目标浏览器窗口宽度
Plugins=object 注册插件
PluginsPath="" 插件文件夹
ShowBorders=true/false 合并边框
SkinPath="" 皮肤文件夹位置
SmileyColumns=12 图符窗列数
SmileyImages=字符数组 图符窗中图片文件名数组
SmileyPath="" 图符文件夹路径
SmileyWindowHeight 图符窗口高度
SmileyWindowWidth 图符窗口宽度
SpellChecker="ieSpell/Spellerpages" 设置拼写检查器
StartupFocus=true/false 开启时FOCUS到编辑器
StylesXmlPath="" 设置定义CSS样式列表的XML文件的位置
TabSpaces=4 TAB键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR集合
ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记
解决上传乱码:在SimpleUploaderServlet.java和ConnectorServlet.java两个文件里找到DiskFileUpload upload = new DiskFileUpload();
分别在其后加入 upload.setHeaderEncoding("utf-8");这样解决了文件上传的中文乱码问题.但是在控制台显示的中文内容还是乱码,但是没关系,我们没必要去看控制台下的中文
500错误：
如果你上传时，出现500的错误，试试加上serializer.jar、xalan.jar、commons-fileupload.jar三个包。
二、根据自己的需求修改：
点击上传图片，将图片信息上传到数据库。
修改connector/ConnectorServlet.java dopost/doget方法。
我用的是post方式提交的：
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
if (debug) System.out.println("--- BEGIN DOPOST ---");
response.setContentType("text/html; charset=UTF-8");
response.setHeader("Cache-Control","no-cache");
PrintWriter out = response.getWriter();
String commandStr=request.getParameter("Command");
String typeStr=request.getParameter("Type");
String currentFolderStr=request.getParameter("CurrentFolder");
String currentPath=baseDir+typeStr+currentFolderStr;
// System.out.println(currentPath);
String currentDirPath=getServletContext().getRealPath(currentPath);
if (debug) System.out.println(currentDirPath);
String retVal="0";
String newName="";
if(!commandStr.equals("FileUpload"))
retVal="203";
else {
DiskFileUpload upload = new DiskFileUpload();
try {
List items = upload.parseRequest(request);
Map fields=new HashMap();
Iterator iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (item.isFormField())
fields.put(item.getFieldName(),item.getString());
else
fields.put(item.getFieldName(),item);
}
FileItem uplFile=(FileItem)fields.get("NewFile");
String fileNameLong=uplFile.getName();
// System.out.println(fileNameLong);
fileNameLong=fileNameLong.replace('\\','/');
String[] pathParts=fileNameLong.split("/");
String fileName=pathParts[pathParts.length-1];
// System.out.println(fileName+"ccccccccccc");
String nameWithoutExt=getNameWithoutExtension(fileName);
System.out.println(nameWithoutExt);
String ext=getExtension(fileName);
System.out.println(ext);
// 上传图片信息，添加到数据库中 开始
List <ImageMessage> imlist=new ArrayList<ImageMessage>();
ImageMessage img=new ImageMessage();
img.setImageName(fileName);
img.setImagePaht(currentDirPath);
imlist.add(img);
LinkDatabase link=new LinkDatabase();
link.insertMessage(imlist);
//结束
File pathToSave=new File(currentDirPath,fileName);
int counter=1;
while(pathToSave.exists()){
newName=nameWithoutExt+"("+counter+")"+"."+ext;
retVal="201";
pathToSave=new File(currentDirPath,newName);
counter++;
}
uplFile.write(pathToSave);
}catch (Exception ex) {
retVal="203";
}
}
out.println("<script type="text/javascript">");
out.println("window.parent.frames['frmUpload'].OnUploadCompleted("+retVal+",'"+newName+"');");
out.println("</script>");
out.flush();
out.close();
if (debug) System.out.println("--- END DOPOST ---");
}
三、动态的修改工具栏
修改fckconfig.js文件。
在添加下面代码，把“Default”，改为自定义工具名称。在jsp 页面设置FCKeditor实例 oFCKeditor.setToolbarSet("自定义工具名称");
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'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','-','About']
] ;
部分内容摘自http://blog.csdn.net/small_city/archive/2007/07/12/1685934.aspx
附件中包括了完整的FCKeditor文件以及配置好的工程源码
PS:项目中用到了struts2，上传时候同样碰到了权限问题，原来是因为struts2的拦截器导致，所以修改filter-mapping即可以：
引用
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
