struts裏整合FCKeditor,包括視頻上傳和中文亂碼的解決!

(1) 先到http://www.fckeditor.net/download 下載FCKeditor_2.6rc.zip和FCKeditor-2.3.zip。將FCKeditor_2.6rc.zip解壓縮,打開解壓後的文件夾,將其中的fckeditor改名爲FCKeditor整體複製到項目的WebRoot目錄下。
然後將FCKeditor-2.3.zip壓縮包中/web/WEB-INF/lib/目錄下的兩個jar文件拷到項目的/WEB-INF/lib/目錄下,/src/com文件夾整體複製到項目中的src下。

(2)合併web.xml,打開原項目的web.xml把壓縮包中/web/WEB-INF/web.xml中的以下內容複製到其中。

<!-- FCKeditor servlet -->
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<!—此處默認爲/UserFiles/,可以修改,前面不需要寫”/項目名” -->
<param-value>/項目中用於存放上傳文件的文件夾/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/項目中用於存放上傳文件的文件夾/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>enabled</param-name>
<!—此處默認爲false,表示是否開啓上傳,需要修改 -->
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name> <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!--以下servlet-mapping 添加/FCKeditor與壓縮包中整體複製到項目的文件夾路徑相對應-->
<servlet-mapping>
<servlet-name>Connector</servlet-name> <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
<!-- FCKeditor servlet -->

(3)刪除無用文件,刪除目錄/FCKeditor/下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml,四個文件以外的所有文件。
刪除目錄/editor/_source, 刪除/editor/filemanager/browser/default/connectors/下的所有文件,刪除 /editor/filemanager/upload/下的所有文件,刪除/editor/lang/下的除了 en.js, zh.js, zh-cn.js三個文件的所有文件。

(4)修改FCKeditor/fckconfig.js中的配置:
所有js配置文件最好保存成UTF-8格式,源代碼要讀取其中數據,
修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
把FCKConfig.LinkBrowserURL等的值替換成以下內容:

FCKConfig.LinkBrowserURL=FCKConfig.BasePath+"filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

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' ;

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' ;

以下是該文件的具體屬性列表:
FCKConfig.CustomConfigurationsPath = '' ; // 自定義配置文件路徑和名稱
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 編輯區的樣式表文件
FCKConfig.EditorAreaStyles = '' ; // 編輯區的樣式表風格
FCKConfig.ToolbarComboPreviewCSS =''; //工具欄預覽CSS
FCKConfig.DocType = '' ;//文檔類型
FCKConfig.BaseHref = ''; // 相對鏈接的基地址
FCKConfig.FullPage = false ; //是否允許編輯整個HTML文件,還是僅允許編輯BODY間的內容
FCKConfig.StartupShowBlocks = false ;//決定是否啓用"顯示模塊"
FCKConfig.Debug = false ;//是否開啓調試功能
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; //皮膚路徑
FCKConfig.PreloadImages=... //預裝入的圖片
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //插件路徑
FCKConfig.AutoDetectLanguage = true ; //是否自動檢測語言
FCKConfig.DefaultLanguage = 'zh-cn' ; //默認語言
FCKConfig.ContentLangDirection = 'ltr' ; //默認的文字方向,可選"ltr/rtl",即從左到右或從右到左
FCKConfig.ProcessHTMLEntities = true ; //處理HTML實體
FCKConfig.IncludeLatinEntities = true ; //包括拉丁文
FCKConfig.IncludeGreekEntities = true ;//包括希臘文
FCKConfig.ProcessNumericEntities = false ;//處理數字實體
FCKConfig.AdditionalNumericEntities = '' ; //附加的數字實體
FCKConfig.FillEmptyBlocks = true ; //是否填充空塊
FCKConfig.FormatSource = true ; //在切換到代碼視圖時是否自動格式化代碼
FCKConfig.FormatOutput = true ; //當輸出內容時是否自動格式化代碼
FCKConfig.FormatIndentator = ' ' ; //當在源碼格式下縮進代碼使用的字符
FCKConfig.StartupFocus = false ; //開啓時焦點是否到編輯器,即打開頁面時光標是否停留在fckeditor上
FCKConfig.ForcePasteAsPlainText = false ; //是否強制粘貼爲純文件內容
FCKConfig.AutoDetectPasteFromWord = true ; //是否自動探測從word粘貼文件,僅支持IE
FCKConfig.ShowDropDialog = true ;//是否顯示下拉菜單
FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符號轉換爲XML實體
FCKConfig.TabSpaces = 0 ;//按下Tab鍵時光標跳格數,默認值爲零爲不跳格
FCKConfig.ShowBorders = true ;//合併邊框
FCKConfig.SourcePopup = false ;//彈出
FCKConfig.ToolbarStartExpanded = true ;//啓動fckeditor工具欄默認是否展開
FCKConfig.ToolbarCanCollapse = true ;//是否允許摺疊或展開工具欄
FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值
FCKConfig.FloatingPanelsZIndex = 10000 ;//浮動面板索引
FCKConfig.HtmlEncodeOutput = false ;//是否將HTML編碼輸出
FCKConfig.TemplateReplaceAll = true ;//是否替換所有模板
FCKConfig.ToolbarLocation = 'In' ;//工具欄位置,
FCKConfig.CustomConfigurationsPath = '' ; // 自定義配置文件路徑和名稱
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 編輯區的樣式表文件
FCKConfig.BaseHref = ''; // 相對鏈接的基地址
FCKConfig.Debug = true/false; // 是否開啓調試功能,當調用FCKDebug.Output()時,會在調試窗中輸出內容
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 設置皮膚
FCKConfig.AutoDetectLanguage = true/false ; // 是否自動檢測語言
FCKConfig.DefaultLanguage = 'zh-cn' ; // 設置默認語言
FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默認文字方向,ltr左,rtr右
FCKConfig.FillEmptyBlocks = true/false ; // 使用這個功能,可以將空的塊級元素用空格來替代
FCKConfig.FormatSource = true/false; // 切換到代碼視圖時,是否自動格式化代碼
FCKConfig.FormatOutput = true/false; // 當輸出內容時是否自動格式化代碼
FCKConfig.FormatIndentator = ""; // 當在“源碼格式”下縮進代碼使用的字符
FCKConfig.GeckoUseSPAN = true/false; // 是否允許SPAN標記代替B,I,U標記
FCKConfig.StartupFocus = true/false; // 開啓時是否FOCUS到編輯器
FCKConfig.ForcePasteAsPlainText = true/false;// 強制粘貼爲純文本
FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符號轉換爲XML實體
FCKConfig.TabSpaces = 0/1; // TAB是否有效
FCKConfig.TabSpaces = 4; // TAB鍵產生的空格字符數
FCKConfig.ShowBorders = true/false; // 是否合併邊框
FCKConfig.ToolbarStartExpanded = true/false; // 頁面載入時,工具欄是否展開,點“展開工具欄”時纔出現
FCKConfig.ToolBarCanCollapse = true/false; // 是否允許展開摺疊工具欄
FCKConfig.ToolbarSets = object ; // 編輯器的工具欄,可以自行定義,刪減,可參考已存在工具欄
FCKConfig.EnterMode = 'p'; // 編輯器中直接回車,在代碼中生成,可選爲p | div | br
FCKConfig.ShiftEnterMode = 'br'; // 編輯器中Shift+回車,在代碼中生成,可選爲p | div | br
FCKConfig.ContextMenu = 字符串數組; // 右鍵菜單的內容
FCKConfig.FontColors = ""; // 文字顏色列表
FCKConfig.FontNames = ""; // 字體列表
FCKConfig.FontSizes = ""; // 字號列表
FCKConfig.FontFormats = ""; // 文字格式列表
FCKConfig.StylesXmlPath = ""; // CSS樣式列表的XML文件的位置
FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼寫檢查器
FCKConfig.IeSpellDownloadUrl = ""; // 下載拼寫檢查器的網址
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路徑
FCKConfig.SmileyImages = ''; // 表情文件名稱列表,具體參考默認設置
FCKConfig.SmileyColumns = 8; // 表情窗口顯示錶情列數
FCKConfig.SmileyWindowWidth = 320; // 表情窗口顯示寬度,此窗口會因爲表情文件的改變而作調整
FCKConfig.SmileyWindowHeight = 240; // 表情窗口顯示高度,此窗口會因爲表情文件的改變而作調整
FCKConfig.FullPage = true/false; // 是否允許編輯整個HTML文件,還是僅允許編輯BODY間的內容



上傳設置
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php</pre></font><hr></blockquote>
//第一個是文件瀏覽器使用的語言,第二個快速上傳使用的語言,改成你需要的,JSP項目這裏就不要改了
FCKConfig.LinkUploadAllowedExtensions = "" ; // empty for all
FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"
//這是兩個允許和拒絕上傳的文件類型列表
FCKConfig.ImageBrowser = false ;//是否在插入圖片功能裏面啓用服務器文件瀏覽功能
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;
//Type=Image 表示文件類型是image這會使文件瀏覽器定位到文件上傳路徑/image/文件夾下面
FCKConfig.FlashBrowser = false ;是否在插入flash功能中啓用服務器文件瀏覽功能
FCKConfig.LinkUpload = false ;是否啓用插入鏈接的快速上傳功能
FCKConfig.ImageUpload = false ;是否啓用圖片快速上傳功能
FCKConfig.FlashUpload = false ;是否啓用flash上傳功能

(5) 調用FCKeditor
用Javascript腳本語言調用必須引用腳本文件 <script type="text/javascript" src="${Env.WEB_BASE_PATH}/FCKeditor/fckeditor.js"></script>

然後找到要顯示編輯器的標籤處進行修改,比如原先的一個struts的文本域爲
<html:textarea property="content"></html:textarea>
那麼現在就要在它後面加上以下這段javascript腳本。
<script type="text/javascript">
var oFCKeditor = new FCKeditor('content') ; //content與textarea的property屬性對應
oFCKeditor.BasePath = "${Env.WEB_BASE_PATH}/FCKeditor/" ;
//寫明FCKeditor文件夾在項目中的路徑
oFCKeditor.Width=450
oFCKeditor.Height = 500;
oFCKeditor.ToolbarSet = "Default" ;//用默認工具欄
oFCKeditor.ReplaceTextarea();
</script>

上面兩處都用到了${Env.WEB_BASE_PATH},這是項目中設置的全局常量,在項目開發過程中一般設置成“/項目名”,而掛到正式服務器上時一般設置爲空(“”)。

(6)增加視頻上傳的功能及其工具欄按鈕
媒體插件下載地址:
http://www.webmb.com.cn/upload/media_plugin_for_FCKeditor_23_build_1054.rar
安裝步驟一:  將 madmedia整個文件夾 拷貝至 editor/plugins/下。
安裝步驟二:
修改fckconfig.js,在文件末尾增加如下一行代碼,FCKConfig.Plugins.Add( 'madmedia', 'en,zh-cn' ) ;
安裝步驟三:修改fckconfig.js,找到toolbar按鈕設置的部分,將媒體按鈕加入toolbar,例如,
原來是,
FCKConfig.ToolbarSets["Default"] = [
['Image','Flash']
]

改爲,
FCKConfig.ToolbarSets["Default"] = [
['Image','Flash','MadMedia']
]

FCKConfig.ContextMenu= ['Generic','Link','Anchor','Image','Flash','Select','Textarea','Checkbox','Radio','TextField',
'HiddenField','ImageButton','Button','BulletedList','NumberedList','Table','Form']

中也可加入
FCKConfig.ContextMenu= ['Generic','Link','Anchor','Image','Flash','MadMedia','Select','Textarea','Checkbox','Radio',
'TextField','HiddenField','ImageButton','Button','BulletedList','NumberedList','Table','Form']

安裝步驟四:修改插件中的/FCKeditor/editor/plugins/madmedia/mdia.js文件,把其中所有的字符串”Flash”用”Link”替換。

安裝步驟五:爲了解決上傳中文文件文件名變爲亂碼的問題需要修改FCKeditor的源代碼,在源碼的 com.fredck.FCKeditor.uploader.SimleUploaderServlet類文件中搜索語句DiskFileUpload upload = new DiskFileUpload();再其後添加一句upload.setHeaderEncoding("UTF-8");編輯完成後把整個源代碼的 com包重新打成一個.jar包代替原來的.jar包。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章