小編給大家分享一下JS操作Fckeditor的方法示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公司主營業(yè)務：成都網(wǎng)站建設、成都網(wǎng)站設計、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出大峪免費做網(wǎng)站回饋大家。

JavaScript有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。

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); // 第二個參數(shù)為：true|false，是否以所見即所得方式設置其內容。此方法常用于"設置初始值"或"表單重置"哦作。

插入內容到 FCK 編輯器：

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

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

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這個文件夾就是我們剛才加上去的，主要用于多參數(shù)或單參數(shù)自定義標簽的匹配，這個在制作編輯模板時非常管用，要想看具體實例的話，大家可以去下載acms 這個系統(tǒng)查看學習，另一個文件夾tablecommands就是編輯器里的表格編輯用到的了。當然，如果你想制作自己其它用途的插件，那就只要按照 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 ;

就可以啦！

第三部分，使用自己的表情圖標，同樣打開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那一行改得只有三個表情圖了。

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

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

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

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

在fckconfig.js找到這三句，這三句不是連著的哦，只是我把他們集中到這兒來了，設置為true的意思就是允許使用fckeditor來瀏覽服務器端的文件圖像以及flash等，這個功能是你插入圖片時彈出的窗口上那個“瀏覽服務器”按鈕可以體現(xiàn)出來，如果你的編輯器只用來自己用或是只在后臺管理用，這個功能無疑很好用，因為他讓你很直觀地對服務器的文件進行上傳操作。但是如果你的系統(tǒng)要面向前臺用戶或是像blog這樣的系統(tǒng)要用的話，這個安全隱患可就大了哦。于是我們把其一律設置為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)/年/月/”這樣的文件夾下了，這個設置對單用戶來用已經(jīng)足夠了，如果你想給多用戶系統(tǒng)用，那就這樣來改

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

上傳的目錄設置完了，但是上傳程序還不會自己創(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的文件上傳默認是不改名的，同時還不支持中文文件名，這樣一來是上傳的文件會變成“.jpg”這樣的無法讀的文件，再就是會有重名文件，當然重名這點倒沒什么，因為fckeditor會自動改名，會在文件名后加（1）這樣來進行標識。但是，我們通常的習慣是讓程序自動生成不重復的文件名

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

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

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

'//取得一個不重復的序號
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ù)組成的文件名了

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; 
 } 
} 
//統(tǒng)計編輯器中內容的字數(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í)行指定動作 
function ExecuteCommand(commandName){ 
 var oEditor = FCKeditorAPI.GetInstance( "content ") ; 
 oEditor.Commands.GetCommand(commandName).Execute() ; 
}

接著分享

FCKeditor獲取帶HTML格式符的內容；

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

FCKeditor獲取純文本不含HTML格式符的內容

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

FCKeditor設置HTML內容

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

FCKeditor獲取焦點

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

js代碼

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

以上是“JS操作Fckeditor的方法示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前文章：JS操作Fckeditor的方法示例
URL分享：http://jinyejixie.com/article30/pgeeso.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、Google、網(wǎng)站導航、網(wǎng)站改版、網(wǎng)站建設、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)