Ø 在线编辑器建议使用开源的FCKeditor,FCKeditor官方网站下载地址http://sourceforge.net/projects/fckeditor/files/
Ø 需要下载的是两个文件夹:FCKeditor_2.6.6及fckeditor-java-2.4-bin。(此非最新版本版本)前者是解压开后即fckeditor在线编辑器,后者为fckeditor应用在java上的核心包。
Ø 接下来开始安装fckeditor,解压FCKeditor_2.6.6后得到fckeditor文件夹。将该文件夹复制到项目的webroot目录下。
Ø 然后通过在页面中调用的方式实现fckeditor的使用。具体的调用方法有两种:一、通过javascript调用(推荐)。首先在新建的jsp页面的开头部分声明引入js标签
<%String contextPath=request.getContextPath(); %>
<script type=”text/javascript” src=”<%=contextPath%20%>/fckeditor/fckeditor.js”></script>
以上的contextPath是为了解决相对路径的问题,即站点的根路径webroot
接下来在body部分应用script代码。例如:
<s:form name=”postform” action=”saveDrafts.action” method=”post”>
<table width=”100%”>
<s:textfield name=”personal_Notes.Title” label=”题目(非空)”/>
<s:textarea name=”personal_Notes.Neirong” rows=”19″ cols=”97″ label=”内容”></s:textarea>
<s:select name=”personal_Notes.ShareType” label=”权限” list=”#{‘2′:’仅自己可见’,’1′:’公开’}”/>
<script type=”text/javascript”>
var oFCKeditor=new FCKeditor(“personal_Notes.Neirong”);
oFCKeditor.BasePath= “<%=contextPath %>/fckeditor/”;
oFCKeditor.Height=300;
oFCKeditor.ToolbarSet=”itcastbbs”;
oFCKeditor.ReplaceTextarea();
</script>
<s:submit value=”存草稿” method=”savePersonal_Notes2″/>
<s:submit value=”发表笔记” method=”savePersonal_Notes”/>
</table>
</s:form>
在以上的打代码中,通过script引用,新建一个fckeditor对象,并将它的内容赋值给textarea传入到数据库,注意,textarea的名字和fckeditor的对象的名字必须相同。oFCKeditor.BasePath即fckeditor文件夹里面被调用内容的路径。ToolbarSet属性的值为工具栏的名字,可以自己新建一个工具栏调用。
二、在jsp页面中通过自定义标签调用
首先在jsp页面的开头下代码
<script type=”text/javascript” src =”fckeditor/fckeditor.js”></script>
<script type=”text/javascript”>
window.onload=function()
{
var oFCKeditor = new FCKeditor( ‘MyTextarea’ ) ;
oFCKeditor.BasePath = “/lab-management/fckeditor/”;
oFCKeditor.ToolbarSet=”itcastbbs”;
oFCKeditor.ReplaceTextarea() ;
}
</script>
然后再body部分引用
<textarea rows=”4″ cols=”60″ name=”MyTextarea”>this is value</textarea>
同样注意名字的匹配。
Ø fekeditor文件夹的核心文件是fckconfig.js。里面有工具栏的样式和各个工具的具体内容等代码。但是由于开发的需要,很多地方是要自己加以修改的。几个需要重点修改的地方如下:一、字体;二、shift和shift+enter键的设定;三、新建工具栏。修改时可以直接在fckconfig.js上改,但是由于文件的重复利用的问题,不建议这么改。最好的方法是自己在fckeditor目录下新建一个文件如myfckconfig.js,将要改的部分写在里面,覆盖掉原有的内容即可。具体做法是在fckconfig.js里提示系统运行myfckconfig.js,即在fckconfig.js的第一行,将原来的FCKConfig.CustomConfigurationsPath=’’;改为FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath+”myconfig.js” ;然后在myfckconfig里写上新的覆盖内容:
FCKConfig.ToolbarSets[“itcastbbs”] = [
[‘Source’,’DocProps’],
[‘Bold’,’Italic’,’Underline’,’StrikeThrough’,’-‘,’Subscript’,’Superscript’],
[‘OrderedList’,’UnorderedList’,’-‘,’Outdent’,’Indent’,’Blockquote’,’CreateDiv’],
[‘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.FontNames = ‘宋体;楷体_GB2312;黑体;隶书;Times New Roman;Arial’ ;
FCKConfig.EnterMode = ‘br’ ; // p | div | br
FCKConfig.ShiftEnterMode = ‘p’ ; // p | div | br
//此文件的保存格式为utf-8
Ø 以上的功能实现了对文字的编辑。如需上传图片还需要做如下修改
Ø 首先在项目webroot/web-inf/lib文件夹里添加如下包
然后再src目录下新建文件fckeditor.properties,在里面写上代码
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl并保存
第三步在web.xml中添加代码
<!–在线编辑器 –>
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
org.nbu.lab619.wrzfekeditor.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>
注意蓝色字体,此处为连接器的路径,如果没修改过连接器(如没有处理中文乱码问题时)时,使用默认路径net.fckeditor.connector.ConnectorServlet即可。
Ø 另外如果你的项目在web.xml中有struts配置如
<!– 启动 Struts 2 的过滤器–>
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
此时,会出现Security error.You probably don’t have enough permissions to upload.Please check your server.的错误提示。这是因为struts和fck冲突发生错误。此时filter不能配制成/*,最好是分开写*.shtml/*.do/*.jsp,切忌不要写成/*。正确的写法如下:
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.shtml</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>