FCKeditor fckEditor = new FCKeditor(super.getRequest());
request.setAttribute("fckEditor", fckEditor);
Velocity頁在中取到這個實例并對其進行設置:
$!{fckEditor.setHeight("190")}
$!{fckEditor.setWidth("420")}
$!{fckEditor.setBasePath("fckeditor/")}
$!{fckEditor.setToolbarSet("Basic")}
$!{fckEditor.setInstanceName("comment")}
$!{fckEditor.create()}
非常簡單,比用jsp實現要容易多了。至少不用設置page。
利用Javascript取和設FCKeditor值也是非常容易的,如下:
// 獲取編輯器中HTML內容
function getEditorHTMLContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.GetXHTML(true));
}
// 獲取編輯器中文字內容
function getEditorTextContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.EditorDocument.body.innerText);
}
// 設置編輯器中內容
function SetEditorContents(EditorName, ContentStr) {
var oEditor = FCKeditorAPI.GetInstance(EditorName) ;
oEditor.SetHTML(ContentStr) ;
}
FCKeditorAPI是FCKeditor加載后注冊的一個全局對象,利用它我們就可以完成對編輯器的各種操作。
在當前頁獲得 FCK 編輯器實例:
var Editor = FCKeditorAPI.GetInstance('InstanceName');
從 FCK 編輯器的彈出窗口中獲得 FCK 編輯器實例:
var Editor = window.parent.InnerDialogLoaded().FCK;
從框架頁面的子框架中獲得其它子框架的 FCK 編輯器實例:
var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');
從頁面彈出窗口中獲得父窗口的 FCK 編輯器實例:
var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');
獲得 FCK 編輯器的內容:
oEditor.GetXHTML(formatted); // formatted 為:true|false,表示是否按HTML格式取出
也可用:
oEditor.GetXHTML();
設置 FCK 編輯器的內容:
oEditor.SetHTML("content", false); // 第二個參數為:true|false,是否以所見即所得方式設置其內容。此方法常用于"設置初始值"或"表單重置"哦作。
插入內容到 FCK 編輯器:
oEditor.InsertHtml("html"); // "html"為HTML文本
檢查 FCK 編輯器內容是否發生變化:
oEditor.IsDirty();
在 FCK 編輯器之外調用 FCK 編輯器工具條命令:
命令列表如下:
DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo
使用方法如下:
oEditor.Commands.GetCommand('FitWindow').Execute();
FCKeditor目錄精簡說明:
1. 根目錄下的文件只留下fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四個文件
2. 刪除所有的以_開頭的文件和文件夾
3. 刪除FCKeditor\editor\filemanager\upload目錄下的所有文件
4. 刪除FCKeditor\editor\filemanager\browser\default\connectors目錄下的所有文件
5. 刪除FCKeditor\editor\_source目錄
以下部分為引用,覺得挺實用,做個備份。
上傳文件部分的定制,適用于高級用戶。
第一部分,裝自己定制的插件,實現模板標簽(開源的東西就有這點好處,隨心所欲地修改),打開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這樣的文件名了,是由年月日時分秒以及三位隨機數組成的文件名了。
試用了一下FCKeditor,感覺不錯(http://www.fckeditor.net)
稍稍整理了一下,過程如下:
1.下載
FCKeditor.java 2.3 (FCKeditot for java)
FCKeditor 2.2 (FCKeditor基本文件)
2.建立項目:tomcat/webapps/FCKeditor
3.FCKeditor.java 2.3解壓后,把其中的web目錄下的WEB-INF目錄copy到FCKeditor下(里面有commons-fileupload.jar,FCKeditor-2.3.jar,web.xml等幾個文件), 把其中的src目錄下的FCKeditor.tld文件copy到FCKeitor/WEB-INF/下
4.修改web.xml:
把SimpleUploader中的配置屬性enabled定義為true(開啟文件上傳功能)
添加標簽定義:
<taglib>
<taglib-uri>/FCKeditor</taglib-uri>
<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</taglib>
5.解壓FCKeditor2.2后,把目錄/editor和fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四個文件copy到/FCKeditor下
刪除目錄/editor/_source,
刪除/editor/filemanager/browser/default/connectors/下的所有文件
刪除/editor/filemanager/upload/下的所有文件
刪除/editor/lang/下的除了fcklanguagemanager.js, en.js, zh.js, zh-cn.js四個文件的所有文件
6.打開/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' ;
7.添加文件 /FCKeditor/test.jsp:
<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%@ taglib uri="/FCKeditor" prefix="FCK" %>
<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<%--
三種方法調用FCKeditor
1.FCKeditor自定義標簽 (必須加頭文件 <%@ taglib uri="/FCKeditor" prefix="FCK" %> )
2.script腳本語言調用 (必須引用 腳本文件 <script type="text/javascript" src="/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="/FCKeditor/"
width="700"
height="500"
skinPath="/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 = "/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( "/FCKeditor/" ) ;
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type="submit" value="Submit">
</form>
--%>
添加文件/FCKeditor/show.jsp:
<%
String content = request.getParameter("content");
out.print(content);
%>
8.瀏覽http://localhost:8080/FCKeditor/test.jsp
ok!
9.上傳遇到錯誤: internal server error 500,
直接引用servlet(com.fredck.FCKeditor.connector.ConnectorServlet)也遇到錯誤: "Provider org.apache.xalan.processor.TransformerFactoryImpl not found",
拷貝xalan.jar到lib目錄就可以了
新免覆蓋注冊
更新說明:不使用覆蓋安裝法,直接輸入注冊碼即可。
下面把 5.5 GA 版本的“注冊信息”“注冊碼”“破解”給大家:
Subscriber: www.1cn.biz
Subscriber Code: jLR7ZL-655355-5450755330522962
時間:20090520