明天的明天的明天

          用鍵盤改變生活

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            17 Posts :: 0 Stories :: 19 Comments :: 0 Trackbacks
          今天找了幾個在線的編輯器覺得fckeditor還是不錯的,決定用它了,轉一篇fckeditor的配置和應用的文章,備忘。

          試用了一下FCKeditor,根據網上的文章小結一下:
          1.下載
          FCKeditor.java 2.3 (FCKeditot for java)
          FCKeditor 2.2 (FCKeditor基本文件)

          2.建立項目:tomcat/webapps/TestFCKeditor.

          3.將FCKeditor2.2解壓縮,將整個目錄FCKeditor復制到項目的根目錄下,
          目錄結構為:tomcat/webapps/TestFCKeditor/FCKeditor
          然后將FCKeditor-2.3.zip(java)壓縮包中\web\WEB-INF\lib\目錄下的兩個jar文件拷到項目的\WEB-INF\lib\目錄下。把其中的src目錄下的FCKeditor.tld文件copy到TestFCKedit/FCKeitor/WEB-INF/下

          4.將FCKeditor-2.3.zip壓縮包中\web\WEB-INF\目錄下的web.xml文件合并到項目的\WEB-INF\目錄下的web.xml文件中。
           

          5. 修改合并后的web.xml文件,將名為SimpleUploader的Servlet的enabled參數值改為true,
          以允許上傳功能,Connector Servlet的baseDir參數值用于設置上傳文件存放的位置。
          添加標簽定義:
          <taglib>
          <taglib-uri>/TestFCKeditor</taglib-uri>
          <taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
          </taglib>

          運行圖:



          6. 上面文件中兩個servlet的映射分別為:/editor/filemanager/browser/default/connectors/jsp/connector
          和/editor/filemanager/upload/simpleuploader,需要在兩個映射前面加上/FCKeditor,
          即改為/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector和
          /FCKeditor/editor/filemanager/upload/simpleuploader。

          7.進入skin文件夾,如果你想使用fckeditor默認的這種奶黃色,
          那就把除了default文件夾外的另兩個文件夾直接刪除.

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

          9.打開/FCKeditor/fckconfig.js
          修改 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' ;


          10.其它
          fckconfig.js總配置文件,可用記錄本打開,修改后將文件存為utf-8 編碼格式。找到:

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


          7.添加文件 /TestFCKeditor/test.jsp:
          <%@ page language="java" import="com.fredck.FCKeditor.*" %>
          <%@ taglib uri="/TestFCKeditor" prefix="FCK" %>
          <script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script>

          <%--
          三種方法調用FCKeditor
          1.FCKeditor自定義標簽 (必須加頭文件 <%@ taglib uri="/TestFCKeditor" prefix="FCK" %> )
          2.script腳本語言調用 (必須引用 腳本文件 <script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script> )
          3.FCKeditor API 調用 (必須加頭文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %> )
          --%>

          <%--
          <form action="show.jsp" method="post" target="_blank">
          <FCK:editor id="content" basePath="/TestFCKeditor/FCKeditor/"
          width="700"
          height="500"
          skinPath="/TestFCKeditor/FCKeditor/editor/skins/silver/"
          toolbarSet = "Default"
          >
          input
          </FCK:editor>
          <input type="submit" value="Submit">
          </form>
          --%>

          <form action="show.jsp" method="post" target="_blank">
          <table border="0" width="700"><tr><td>
          <textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea>
          <script type="text/javascript">
          var oFCKeditor = new FCKeditor('content') ;
          oFCKeditor.BasePath = "/TestFCKeditor/FCKeditor/" ;
          oFCKeditor.Height = 400;
          oFCKeditor.ToolbarSet = "Default" ; 
          oFCKeditor.ReplaceTextarea();
          </script>
          <input type="submit" value="Submit">
          </td></tr></table>
          </form>

          <%--
          <form action="show.jsp" method="post" target="_blank">
          <%
          FCKeditor oFCKeditor ;
          oFCKeditor = new FCKeditor( request, "content" ) ;
          oFCKeditor.setBasePath( "/TestFCKeditor/FCKeditor/" ) ;
          oFCKeditor.setValue( "input" );
          out.println( oFCKeditor.create() ) ;
          %>
          <br>
          <input type="submit" value="Submit">
          </form>
          --%>


          添加文件/TestFCKeditor/show.jsp:
          <%
          String content = request.getParameter("content");
          out.print(content);
          %>

          8.瀏覽http://localhost:8080/TestFCKeditor/test.jsp
          ok!



          FCKeditor是現在比較流行的一種可視化在線編輯器,支持多種編成語言(asp,php,jsp等)。
          下面是在asp中使用的方法
          <!--#include file="../FCKeditor/fckeditor.asp" -->
          <%
          Dim oFCKeditor
          Set oFCKeditor = New FCKeditor
          oFCKeditor.BasePath = "../FCKeditor/"    'FCKeditor所在網站目錄
          oFCKeditor.width = "100%"
          oFCKeditor.height = "400"
          oFCKeditor.Value = ""                                  ‘初始化內容
          oFCKeditor.Create "content"             
          %> 
          使用中用request("content")取值

          關于上傳圖片,默認是不支持上傳圖片功能的,如果要使用可以將FCKeditor\editor\filemanager\browser\default\connectors\asp目錄下的config.asp中的ConfigIsEnabled = false改成true 


          FCKeditor2.0在線編輯器的修改與設置-文件上傳部分管理部分 
          [ Pubdate:2005-8-2 Tuesday ] [ Weather:多云 ,東北風 4-5級 ,最低氣溫22 ℃ ] 
          以下部分為原創,如需轉載請注明“出處:http://3rgb.com 作者:檸檬園主”

          上次我們講了FCKeditor的使用相關的設置以及一些優化設置,對于普通的用戶已經很受用了,今天再來講幾個小技巧,另外著重講一下對上傳文件部分的定制,適用于高級用戶。

          第一部分,裝自己定制的插件,實現模板標簽(開源的東西就有這點好處,隨心所欲地修改),打開fckconfig.js文件找到
          FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; 
          // FCKConfig.Plugins.Add( 'placeholder', 'en,it' ) ; 

           

           去掉//后,就相當于把placeholder這個插件功能加上了,fckeditor的插件文件都在/editor/plugins/文件夾下分類按文件夾放置的,對于fckeditor2.0來說,里面有兩個文件夾,也就是有兩個官方插件,placeholder這個文件夾就是我們剛才加上去的,主要用于多參數或單參數自定義標簽的匹配,這個在制作編輯模板時非常管用,要想看具體實例的話,大家可以去下載acms這個系統查看學習,另一個文件夾tablecommands就是編輯器里的表格編輯用到的了。當然,如果你想制作自己其它用途的插件,那就只要按照fckeidtor插件的制作規則制作完放置在/editor/plugins/下就行,然后再在fckeidtor.js里再添加FCKConfig.Plugins.Add('Plugin Name',',lang,lang');就可以了。

           

          第二部分 ,如何讓編輯器一打開的時候,編輯工具條不出現,等點“展開工具欄”時才出現?Easy,FCKeditor本身提供了這個功能啦,打開fckconfig.js,找到

          FCKConfig.ToolbarStartExpanded = true ;
          改成
          FCKConfig.ToolbarStartExpanded = false ;
          就可以啦!

           第三部分,使用自己的表情圖標,同樣打開fckcofnig.js到最底部那一段


          FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
          FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif'] ;
          FCKConfig.SmileyColumns = 8 ;
          FCKConfig.SmileyWindowWidth  = 320 ;
          FCKConfig.SmileyWindowHeight = 240 ;
          上面這段已經是我修改過的了,為了我發表此文的版面不會被撐得太開,我把FCKConfig.SmileyImages那一行改得只有三個表情圖了。

          第一行,當然是表情圖標路徑的設置,第二行是相關表情圖標文件名的一個List,第三行是指彈出的表情添加窗口最每行的表情數,下面兩個參數是彈出的模態窗口的寬和高嘍。

          第四部分,文件上傳管理部分

          此部分可能是大家最為關心的,上一篇文章簡單的講了如何修改來上傳文件以及使用fckeidtor2.0才提供的快速上傳功能。再我們繼續再深層次的講解上傳功能

          FCKConfig.LinkBrowser = true ;
          FCKConfig.ImageBrowser = true ;
          FCKConfig.FlashBrowser = true ;在fckconfig.js找到這三句,這三句不是連著的哦,只是我把他們集中到這兒來了,設置為true的意思就是允許使用fckeditor來瀏覽服務器端的文件圖像以及flash等,這個功能是你插入圖片時彈出的窗口上那個“瀏覽服務器”按鈕可以體現出來,如果你的編輯器只用來自己用或是只在后臺管理用,這個功能無疑很好用,因為他讓你很直觀地對服務器的文件進行上傳操作。但是如果你的系統要面向前臺用戶或是像blog這樣的系統要用的話,這個安全隱患可就大了哦。于是我們把其一律設置為false;如下

          FCKConfig.LinkBrowser = false ;
          FCKConfig.ImageBrowser = false ;
          FCKConfig.FlashBrowser = false ;
          這樣一來,我們就只有快速上傳可用了啊,好!接下來就來修改,同樣以asp為范例進行,進入/editor/filemanager/upload/asp/打開config.asp,修改
          ConfigUserFilesPath = "/UserFiles/"這個設置是上傳文件的總目錄,我這里就不動了,你想改自己改了

          好,再打開此目錄下的upload.asp文件,找到下面這一段


          Dim resourceType
          If ( Request.QueryString("Type") <> "" ) Then
           resourceType = Request.QueryString("Type")
          Else
           resourceType = "File"
          End If 
          然后再在其后面添加


          ConfigUserFilesPath = ConfigUserFilesPath & resourceType &"/"& Year(Date()) &"/"& Month(Date()) &"/" 
          這樣的話,上傳的文件就進入“/userfiles/文件類型(如image或file或flash)/年/月/”這樣的文件夾下了,這個設置對單用戶來用已經足夠了,如果你想給多用戶系統用,那就這樣來改


          ConfigUserFilesPath = ConfigUserFilesPath & Session("username") & resourceType &"/"& Year(Date()) &"/"& Month(Date()) &"/" 
          這樣上傳的文件就進入“/userfiles/用戶目錄/文件類型/年/月/”下了,當然如果你不想這么安排也可以修改成別的,比如說用戶目錄再深一層等,這里的Session("username")請根據自己的需要進行修改或換掉。

          上傳的目錄設置完了,但是上傳程序還不會自己創建這些文件夾,如果不存在的話,上傳不會成功的,那么我們就得根據上面的上傳路徑的要求進行遞歸來生成目錄了。

          找到這一段


           Dim sServerDir
           sServerDir = Server.MapPath( ConfigUserFilesPath )
           If ( Right( sServerDir, 1 ) <> "\" ) Then
            sServerDir = sServerDir & "\"
           End If
          把它下面的這兩行


           Dim oFSO
           Set oFSO = Server.CreateObject( "Scripting.FileSystemObject" ) 
          用下面這一段代碼來替換


           dim arrPath,strTmpPath,intRow
           strTmpPath = ""
           arrPath = Split(sServerDir, "\") 
           Dim oFSO
           Set oFSO = Server.CreateObject( "Scripting.FileSystemObject" )
           for intRow = 0 to Ubound(arrPath)
            strTmpPath = strTmpPath & arrPath(intRow) & "\"
            if oFSO.folderExists(strTmpPath)=false then
             oFSO.CreateFolder(strTmpPath)
            end if
           next 
          用這段代碼就可以生成你想要的文件夾了,在上傳的時候自動生成。

          好了,上傳文件的修改到現在可以暫時告一段落了,但是,對于中文用戶還存在這么個問題,就是fckeditor的文件上傳默認是不改名的,同時還不支持中文文件名,這樣一來是上傳的文件會變成“.jpg”這樣的無法讀的文件,再就是會有重名文件,當然重名這點倒沒什么,因為fckeditor會自動改名,會在文件名后加(1)這樣來進行標識。但是,我們通常的習慣是讓程序自動生成不重復的文件名

          在剛才那一段代碼的下面緊接著就是
           ' Get the uploaded file name.
           sFileName = oUploader.File( "NewFile" ).Name
          看清楚了,這個就是文件名啦,我們來把它改掉,當然得有個生成文件名的函數才行,改成下面這樣

           '//取得一個不重復的序號
          Public Function GetNewID()
           dim ranNum
           dim dtNow
           randomize
           dtNow=Now()
           ranNum=int(90000*rnd)+10000
           GetNewID=year(dtNow) & right("0" & month(dtNow),2) & right("0" & day(dtNow),2) & right("0" & hour(dtNow),2) & right("0" & minute(dtNow),2) & right("0" & second(dtNow),2) & ranNum
          End Function

          ' Get the uploaded file name.
           sFileName = GetNewID() &"."& split(oUploader.File( "NewFile" ).Name,".")(1)

          這樣一來,上傳的文件就自動改名生成如20050802122536365.jpg這樣的文件名了,是由年月日時分秒以及三位隨機數組成的文件名了。

          /***************************************************************/

          另附:主要配置內容

          CODE:
           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間的內容
          posted on 2007-09-17 12:38 Endless 閱讀(1211) 評論(2)  編輯  收藏

          Feedback

          # re: [轉]在jsp環境中配置使用FCKEditor 2007-09-26 23:06 ztwc
          是啊,fckediter 很好用,我博客都是用這個。  回復  更多評論
            

          # re: [轉]在jsp環境中配置使用FCKEditor[未登錄] 2011-05-25 16:45 aa
          <script type="text/javascript">不重復寂寞</script>  回復  更多評論
            


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 郯城县| 南城县| 南川市| 麻江县| 莎车县| 石河子市| 阜阳市| 平昌县| 资中县| 栾城县| 车致| 祁连县| 紫金县| 乡宁县| 葵青区| 攀枝花市| 永兴县| 隆林| 遂平县| 卓尼县| 醴陵市| 板桥市| 田阳县| 黄骅市| 茶陵县| 双流县| 平利县| 托克托县| 南京市| 封丘县| 左贡县| 平武县| 江孜县| 阳江市| 余干县| 龙井市| 合肥市| 黑龙江省| 神木县| 巴东县| 北安市|