struts2+hibernate項目裏面怎麼配置Fckeditor在線編輯器

大家如果做項目的時候 ,不出意外,90%以上的項目肯定會用到一款在線編輯器,所以說項目裏面整合編輯器是必須要走的一段路,在這裏的話  我只是介紹struts2+hibernate項目裏怎麼配置Fckeditor編輯器,像其他的XHeditor,新浪編輯器等等的我就不多說了。

1,首先你的有fckeditor編輯器,這個去網上下吧。然後我是放在dl_pro_admin目錄下了(就是後臺文件夾下)

2,需要導入對應的jar包(fckeditor-java-core-2.4.jar),沒有的話去官網下或者去csdn等等下載。

3,然後在項目src下建立文件 fckeditor.properties,內容爲

#Fckeditor setting
#用戶上傳文件路徑目錄
connector.userFilesPath=/dl_pro_admin/userUploadFile
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

4,首先確定一點是,所有的牽扯action的操作 都要加上.action,例如提交操作form裏面的 addNew.action  原先的時候我都不加.action因爲struts2默認會給你加上.action, 但是後來配了編輯器發現,我錯了,費了好大的力氣,所有的action操作全都加上.action了。

5,這裏配完以後,那麼web.xml裏面需要改一下了。我把我的全都貼出來了。注意不是/*了,而是*.action  *.jsp了。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>test.jsp</welcome-file>
  </welcome-file-list>
  
 <!-- FCKeditor配置 -->
  <servlet>
   <servlet-name>Connector</servlet-name>
   <servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>
   <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
   <servlet-name>Connector</servlet-name>
   <url-pattern>/dl_pro_admin/fckeditor/editor/filemanager/connectors/*</url-pattern>
  </servlet-mapping>  


     <filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>    
    <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>   
   
</web-app>

6,現在的話 所有配置都結束了,然後看在網站後臺頁面中怎麼調用。

7,頁面加載編輯器,在頁面頭部加入以下代碼,自己注意路徑,進行修改

<link href="<%=basePath %>dl_pro_admin/fckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basePath %>dl_pro_admin/fckeditor/fckeditor.js"></script>
<script type="text/javascript">

//初始化fckeditor
window.onload = function()
{
 var sBasePath = "<%=basePath %>dl_pro_admin/fckeditor/";
 var oFCKeditor = new FCKeditor( 'pro_news_content' ) ;
 oFCKeditor.Width="100%";
 oFCKeditor.Height="300"; 
 oFCKeditor.BasePath = sBasePath ;
 oFCKeditor.ReplaceTextarea() ;
}
</script>

form表單如下

<form action='add.action' method='post'>

<textarea   name="pro_news_content" rows="10" cols="80">
</textarea>

</form>

這樣就完了,獲取的時候  這個pro_news_content跟普通<input type='text' name='usernmae' />裏的username一樣,正常操作.

發佈了21 篇原創文章 · 獲贊 24 · 訪問量 22萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章