SSH2 struts2 在线编辑器实现（一）

技术2022-05-20 42

在线编辑器建议使用开源的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(); %>

以上的contextPath是为了解决相对路径的问题，即站点的根路径webroot

接下来在body部分应用script代码。例如：

<s:form name="postform" action="saveDrafts.action" method="post">

<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':'公开'}"/>

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页面的开头下代码

window.οnlοad=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-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配置如