明天的明天的明天

試用了一下FCKeditor,根據(jù)網(wǎng)上的文章小結(jié)一下：
1.下載
FCKeditor.java 2.3 (FCKeditot for java)
FCKeditor 2.2 (FCKeditor基本文件)

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

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

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

5. 修改合并后的web.xml文件，將名為SimpleUploader的Servlet的enabled參數(shù)值改為true，
以允許上傳功能，Connector Servlet的baseDir參數(shù)值用于設(shè)置上傳文件存放的位置。
添加標(biāo)簽定義:
<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默認(rèn)的這種奶黃色，
那就把除了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等的值替換成以下內(nèi)容：
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 ; 即在編輯器域內(nèi)可以使用Tab鍵。

如果你的編輯器還用在網(wǎng)站前臺的話，比如說用于留言本或是日記回復(fù)時，那就不得不考慮安全了，
在前臺千萬不要使用Default的toolbar，要么自定義一下功能，要么就用系統(tǒng)已經(jīng)定義好的Basic，
也就是基本的toolbar，找到：
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-',
'Smiley','SpecialChar','Replace','Preview'] ] ;
這是改過的Basic，把圖像功能去掉，把添加鏈接功能去掉，因為圖像和鏈接和flash和圖像按鈕添加功能都能讓前臺
頁直接訪問和上傳文件， fckeditor還支持編輯域內(nèi)的鼠標(biāo)右鍵功能。

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

這也是改過的把鼠標(biāo)右鍵的“鏈接、圖像，F(xiàn)LASH，圖像按鈕”功能都去掉。

　　找到： 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>

<%--
三種方法調(diào)用FCKeditor
1.FCKeditor自定義標(biāo)簽 (必須加頭文件 <%@ taglib uri="/TestFCKeditor" prefix="FCK" %> )
2.script腳本語言調(diào)用 (必須引用 腳本文件 <script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script> )
3.FCKeditor API 調(diào)用 (必須加頭文件 <%@ 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是現(xiàn)在比較流行的一種可視化在線編輯器，支持多種編成語言(asp,php,jsp等)。
下面是在asp中使用的方法
<!--#include file="../FCKeditor/fckeditor.asp" -->
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "../FCKeditor/"    'FCKeditor所在網(wǎng)站目錄
oFCKeditor.width = "100%"
oFCKeditor.height = "400"
oFCKeditor.Value = ""                                  ‘初始化內(nèi)容
oFCKeditor.Create "content"             
%> 
使用中用request("content")取值

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


FCKeditor2.0在線編輯器的修改與設(shè)置-文件上傳部分管理部分 
[ Pubdate:2005-8-2 Tuesday ] [ Weather:多云 ,東北風(fēng) ４－５級 ,最低氣溫22 ℃ ] 
以下部分為原創(chuàng)，如需轉(zhuǎn)載請注明“出處：http://3rgb.com 作者：檸檬園主”

上次我們講了FCKeditor的使用相關(guān)的設(shè)置以及一些優(yōu)化設(shè)置，對于普通的用戶已經(jīng)很受用了，今天再來講幾個小技巧，另外著重講一下對上傳文件部分的定制，適用于高級用戶。

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

 

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

 

第二部分 ，如何讓編輯器一打開的時候，編輯工具條不出現(xiàn)，等點“展開工具欄”時才出現(xiàn)？Easy，F(xiàn)CKeditor本身提供了這個功能啦，打開fckconfig.js，找到

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

 第三部分，使用自己的表情圖標(biāo)，同樣打開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 ;
上面這段已經(jīng)是我修改過的了，為了我發(fā)表此文的版面不會被撐得太開，我把FCKConfig.SmileyImages那一行改得只有三個表情圖了。

第一行，當(dāng)然是表情圖標(biāo)路徑的設(shè)置，第二行是相關(guān)表情圖標(biāo)文件名的一個List，第三行是指彈出的表情添加窗口最每行的表情數(shù)，下面兩個參數(shù)是彈出的模態(tài)窗口的寬和高嘍。

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

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

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

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

好，再打開此目錄下的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)/年/月/”這樣的文件夾下了，這個設(shè)置對單用戶來用已經(jīng)足夠了，如果你想給多用戶系統(tǒng)用，那就這樣來改


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

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

找到這一段


 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 
用這段代碼就可以生成你想要的文件夾了，在上傳的時候自動生成。

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

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

 '//取得一個不重復(fù)的序號
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這樣的文件名了，是由年月日時分秒以及三位隨機數(shù)組成的文件名了。

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

另附：主要配置內(nèi)容