| 導購 | 订阅 | 在线投稿
分享
 
 
 

javascript獲取FCKeditor內容

來源:互聯網  2008-12-22 08:10:16  評論

形式如:

varoEditor=FCKeditorAPI.GetInstance('content');

varcontent=oEditor.GetXHTML(true);

*************************************************

利用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這樣的文件名了,是由年月日時分秒以及三位隨機數組成的文件名了

形式如: varoEditor=FCKeditorAPI.GetInstance('content'); varcontent=oEditor.GetXHTML(true); ************************************************* 利用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這樣的文件名了,是由年月日時分秒以及三位隨機數組成的文件名了
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有