JS操作Fckeditor的一些常用方法(獲取、插入等)
javascript獲取和設定FCKeditor內容
利用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();
= 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載入完成後做處理的方法
function FCKeditor_OnComplete( editorInstance )
{
editorInstance.Events.AttachEvent( 'OnBlur',FCKeditor_OnBlur ) ;
editorInstance.Events.AttachEvent( 'OnFocus',FCKeditor_OnFocus ) ;
}
function FCKeditor_OnBlur( editorInstance )
{
editorInstance.ToolbarSet.Collapse() ;
}
function FCKeditor_OnFocus( editorInstance )
{
editorInstance.ToolbarSet.Expand() ;
}
以下是補充資料
JS操作Fckeditor的一些常用方法
//向編輯器插入指定程式碼
function insertHTMLToEditor(codeStr){
var oEditor = FCKeditorAPI.GetInstance("content");
oEditor.InsertHtml(codeStr); // "html"為HTML文字
}
//獲取編輯器中HTML內容
function getEditorHTMLContents() {
var oEditor = FCKeditorAPI.GetInstance("content");
return(oEditor.GetXHTML(false));
}
// 獲取編輯器中文字內容
function getEditorTextContents() {
var oEditor = FCKeditorAPI.GetInstance("content");
return(oEditor.EditorDocument.body.innerText);
}
// 設定編輯器中內容
function SetEditorContents(ContentStr) {
var oEditor = FCKeditorAPI.GetInstance("content") ;
oEditor.SetHTML(ContentStr) ;
}
//向編輯器插入指定程式碼
function insertHTMLToEditor(codeStr){
var oEditor = FCKeditorAPI.GetInstance( "content ");
if (oEditor.EditMode==FCK_EDITMODE_WYSIWYG){
oEditor.InsertHtml(codeStr);
}else{
return false;
}
}
//統計編輯器中內容的字數
function getLength(){
var oEditor = FCKeditorAPI.GetInstance( "content ");
var oDOM = oEditor.EditorDocument;
var iLength ;
if(document.all){
iLength = oDOM.body.innerText.length;
}else{
var r = oDOM.createRange();
r.selectNodeContents(oDOM.body);
iLength = r.toString().length;
}
alert(iLength);
}
//執行指定動作
function ExecuteCommand(commandName){
var oEditor = FCKeditorAPI.GetInstance( "content ") ;
oEditor.Commands.GetCommand(commandName).Execute() ;
}
到此這篇關於JS操作Fckeditor的一些常用方法(獲取、插入等)的文章就介紹到這了,更多相關JS操作Fckeditor內容請搜素我們以前的文章或下面相關文章，希望大家以後多多支援我們！