javascript獲取和設(shè)置FCKeditor內(nèi)容

利用Javascript取和設(shè)FCKeditor值也是非常容易的，如下：

// 獲取編輯器中HTML內(nèi)容
function getEditorHTMLContents(EditorName) { 
var oEditor = FCKeditorAPI.GetInstance(EditorName); 
return(oEditor.GetXHTML(true)); 
}

// 獲取編輯器中文字內(nèi)容
function getEditorTextContents(EditorName) { 
var oEditor = FCKeditorAPI.GetInstance(EditorName); 
return(oEditor.EditorDocument.body.innerText); 
}

// 設(shè)置編輯器中內(nèi)容
function SetEditorContents(EditorName, ContentStr) { 
var oEditor = FCKeditorAPI.GetInstance(EditorName) ; 
oEditor.SetHTML(ContentStr) ; 
}

FCKeditorAPI是FCKeditor加載后注冊(cè)的一個(gè)全局對(duì)象，利用它我們就可以完成對(duì)編輯器的各種操作。

在當(dāng)前頁(yè)獲得 FCK 編輯器實(shí)例：

var Editor = FCKeditorAPI.GetInstance('InstanceName');

從 FCK 編輯器的彈出窗口中獲得 FCK 編輯器實(shí)例：

var Editor = window.parent.InnerDialogLoaded().FCK;

從框架頁(yè)面的子框架中獲得其它子框架的 FCK 編輯器實(shí)例：

var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

從頁(yè)面彈出窗口中獲得父窗口的 FCK 編輯器實(shí)例：

var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');

獲得 FCK 編輯器的內(nèi)容：

oEditor.GetXHTML(formatted); // formatted 為：true|false，表示是否按HTML格式取出

也可用：

oEditor.GetXHTML();

設(shè)置 FCK 編輯器的內(nèi)容：

oEditor.SetHTML("content", false); // 第二個(gè)參數(shù)為：true|false，是否以所見(jiàn)即所得方式設(shè)置其內(nèi)容。此方法常用于"設(shè)置初始值"或"表單重置"哦作。

插入內(nèi)容到 FCK 編輯器：

oEditor.InsertHtml("html"); // "html"為HTML文本

檢查 FCK 編輯器內(nèi)容是否發(fā)生變化：

oEditor.IsDirty();

在 FCK 編輯器之外調(diào)用 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' ) ;

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

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

FCKConfig.ToolbarStartExpanded = true ;
改成
FCKConfig.ToolbarStartExpanded = false ;

就可以啦！

第三部分，使用自己的表情圖標(biāo)，同樣打開(kāi)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)是我修改過(guò)的了，為了我發(fā)表此文的版面不會(huì)被撐得太開(kāi)，我把FCKConfig.SmileyImages那一行改得只有三個(gè)表情圖了。

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

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

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

FCKConfig.LinkBrowser = true ;
FCKConfig.ImageBrowser = true ;
FCKConfig.FlashBrowser = true ;

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

FCKConfig.LinkBrowser = false ;
FCKConfig.ImageBrowser = false ;
FCKConfig.FlashBrowser = false ;

這樣一來(lái)，我們就只有快速上傳可用了啊，好！接下來(lái)就來(lái)修改，同樣以asp為范例進(jìn)行，進(jìn)入/editor/filemanager/upload/asp/打開(kāi)config.asp，修改
ConfigUserFilesPath = "/UserFiles/"這個(gè)設(shè)置是上傳文件的總目錄，我這里就不動(dòng)了，你想改自己改了

好，再打開(kāi)此目錄下的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()) &"/"

這樣的話，上傳的文件就進(jìn)入“/userfiles/文件類(lèi)型（如image或file或flash)/年/月/”這樣的文件夾下了，這個(gè)設(shè)置對(duì)單用戶來(lái)用已經(jīng)足夠了，如果你想給多用戶系統(tǒng)用，那就這樣來(lái)改

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

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

找到這一段

Dim sServerDir
sServerDir = Server.MapPath( ConfigUserFilesPath )
If ( Right( sServerDir, 1 ) <> "\" ) Then
sServerDir = sServerDir & "\"
End If

把它下面的這兩行

Dim oFSO
Set oFSO = Server.CreateObject( "Scripting.FileSystemObject" )

用下面這一段代碼來(lái)替換

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 

用這段代碼就可以生成你想要的文件夾了，在上傳的時(shí)候自動(dòng)生成。

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

在剛才那一段代碼的下面緊接著就是

' Get the uploaded file name.
sFileName = oUploader.File( "NewFile" ).Name

看清楚了，這個(gè)就是文件名啦，我們來(lái)把它改掉，當(dāng)然得有個(gè)生成文件名的函數(shù)才行，改成下面這樣

'//取得一個(gè)不重復(fù)的序號(hào)
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)

上傳的文件就自動(dòng)改名生成如20050802122536365.jpg這樣的文件名了，是由年月日時(shí)分秒以及三位隨機(jī)數(shù)組成的文件名了

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() ; 
}

以下是補(bǔ)充資料

JS操作Fckeditor的一些常用方法

//向編輯器插入指定代碼 
function insertHTMLToEditor(codeStr){ 
 var oEditor = FCKeditorAPI.GetInstance("content");
 oEditor.InsertHtml(codeStr); // "html"為HTML文本
}
//獲取編輯器中HTML內(nèi)容
function getEditorHTMLContents() {
 var oEditor = FCKeditorAPI.GetInstance("content");
 return(oEditor.GetXHTML(false));
}
// 獲取編輯器中文字內(nèi)容
function getEditorTextContents() {
 var oEditor = FCKeditorAPI.GetInstance("content");
 return(oEditor.EditorDocument.body.innerText);
}
// 設(shè)置編輯器中內(nèi)容
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; 
 } 
} 
//統(tǒng)計(jì)編輯器中內(nèi)容的字?jǐn)?shù) 
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); 
} 
//執(zhí)行指定動(dòng)作 
function ExecuteCommand(commandName){ 
 var oEditor = FCKeditorAPI.GetInstance( "content ") ; 
 oEditor.Commands.GetCommand(commandName).Execute() ; 
}

接著分享

FCKeditor獲取帶HTML格式符的內(nèi)容；

FCKeditorAPI.GetInstance("編輯器id").GetXHTML();

FCKeditor獲取純文本不含HTML格式符的內(nèi)容

FCKeditorAPI.GetInstance("編輯器id").EditorDocument.body.innerText; 

FCKeditor設(shè)置HTML內(nèi)容

FCKeditorAPI.GetInstance("編輯器id").SetHTML("<div>abc</div>");

FCKeditor獲取焦點(diǎn)

FCKeditorAPI.GetInstance("編輯器id").Focus();

js代碼

<script type="text/javascript" language="javascript">
  function a()
  {
      //得到控件的html
       var checkContent =FCKeditorAPI.GetInstance("FCKeditor1").GetXHTML();
      alert(checkContent);
      //得到html的長(zhǎng)度
       var len = FCKeditorAPI.GetInstance("FCKeditor1").GetXHTML().length;
      alert(len);
      //得到fck控件
      var oEditor = FCKeditorAPI.GetInstance('FCKeditor1');
      //得到編輯器中的文字
      var text = oEditor.EditorDocument.body.innerText;
      alert(text);
      //讓編輯器得到焦點(diǎn)
      oEditor.Focus();
 
  }
  </script>

到此這篇關(guān)于JS操作Fckeditor的一些常用方法(獲取、插入等)的文章就介紹到這了,更多相關(guān)JS操作Fckeditor內(nèi)容請(qǐng)搜素腳本之家以前的文章或下面相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論