感谢支持
我们一直在努力

SSH2 struts2 FCKeditor在线编辑器实现

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

赞(0) 打赏
转载请注明出处:服务器评测 » SSH2 struts2 FCKeditor在线编辑器实现
分享到: 更多 (0)

听说打赏我的人,都进福布斯排行榜啦!

支付宝扫一扫打赏

微信扫一扫打赏