FCKeditor API中文用例说明

FCKeditor Api官方文档地址：http://wiki.fckeditor.net/Developer's_Guide/Javascript_API

下面提供国内某网友的翻译文档，转载地址：http://blog.imwebs.com/article.asp?id=322

FCK 编辑器加载后，将会注册一个全局的 FCKeditorAPI 对象。

如何交互式地知道 FCK 编辑器已经加载完成? 

FCKeditorAPI 对象在页面加载期间是无效的，直到页面加载完成。如果需要交互式地知道 FCK 编辑器已经加载完成，可使用"FCKeditor_OnComplete"函数。

 

  1. <script type="text/javascript">    
  2. function FCKeditor_OnComplete(editorInstance) {    
  3.    FCKeditorAPI.GetInstance('FCKeditor1').Commands.GetCommand('FitWindow').Execute();    
  4. }    
  5. </script> 

 

在当前页获得 FCK 编辑器实例:

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

从 FCK 编辑器的弹出窗口中获得 FCK 编辑器实例:

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

从框架页面的子框架中获得其它子框架的 FCK 编辑器实例?

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

从页面弹出窗口中获得父窗口的 FCK 编辑器实例:

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

获得 FCK 编辑器的内容:

  1. oEditor.GetXHTML(formatted); // formatted 为：true|false，表示是否按HTML格式取出  
  2. //也可用：  
  3. oEditor.GetXHTML();  

设置 FCK 编辑器的内容:

  1. oEditor.SetHTML("content", false); // 第二个参数为：true|false，是否以所见即所得方式设置其内容。此方法常用于"设置初始值"或"表单重置"哦作。  

插入内容到 FCK 编辑器：

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

检查 FCK 编辑器内容是否发生变化：

  1. oEditor.IsDirty();  

重置FCK 编辑器内容是否发生变化的状态.

 

  1. oEditor.ResetIsDirty();  

在 FCK 编辑器之外调用 FCK 编辑器工具条命令：

 

命令列表如下： 

  1. 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  

使用方法如下：

  1. oEditor.Commands.GetCommand('FitWindow').Execute(); 
  1. function abc()  
  2.   {  
  3.    var checkContent =FCKeditorAPI.GetInstance("editor");//获取实例  
  4.    alert(checkContent.GetXHTML());//获取当前内容  
  5.    var newelement = document.createElement("a");  
  6.    newelement.href="#";  
  7.    newelement.innerHTML="df";  
  8.    checkContent.InsertElement(newelement);//前部添加元素(无返回值)  
  9.    var a=checkContent.InsertElementAndGetIt(newelement);//前部添加元素(返回元素)  
  10.    checkContent.InsertHtml("")//添加html  
  11.    checkContent.SetHTML("",true);//设置内容,后为bool,是否所见即所得  
  12. }  
  1. function aaa()  
  2. {  
  3. var checkContent =FCKeditorAPI.GetInstance("editor");//获取实例  
  4. checkContent.SwitchEditMode();//转变编辑模式  
  5. checkContent.UpdateLinkedField();//更新关联文件  
  6. }  
  1. function FCKeditor_OnComplete( checkContent )//当加载完  
  2. {  
  3.    alert( checkContent.Name ) ;  
  4. }  

//设置fckeditor为只读

  1. function FCKeditor_OnComplete(editorInstance)  
  2. {  
  3.    editorInstance.EditorDocument.body.disabled = true;  
  4.    editorInstance.EditorWindow.parent.document.getElementById('xExpanded').style.display = 'none';  
  5.    editorInstance.EditorWindow.parent.document.getElementById('xCollapsed').style.display = 'none';  
  6.    editorInstance.EditorWindow.blur();  
  7. }  

向编辑器插入指定代码

  1. function insertHTMLToEditor(codeStr){  
  2.   var oEditor = FCKeditorAPI.GetInstance("content");  
  3.   if (oEditor.EditMode==FCK_EDITMODE_WYSIWYG){  
  4.     oEditor.InsertHtml(codeStr);  
  5.   }else{  
  6.     return false;  
  7.   }  
  8. }  

统计编辑器中内容的字数

  1. function getLength(){  
  2.   var oEditor = FCKeditorAPI.GetInstance("content");  
  3.   var oDOM = oEditor.EditorDocument;  
  4.   var iLength ;  
  5.   if(document.all){  
  6.     iLength = oDOM.body.innerText.length;  
  7.   }else{  
  8.     var r = oDOM.createRange();  
  9.     r.selectNodeContents(oDOM.body);  
  10.     iLength = r.toString().length;  
  11.   }  
  12.   alert(iLength);  
  13. }  

执行指定动作

  1. function ExecuteCommand(commandName){  
  2.   var oEditor = FCKeditorAPI.GetInstance("content") ;  
  3.   oEditor.Commands.GetCommand(commandName).Execute() ;  
  4. }  

设置编辑器中内容

  1. function SetContents(codeStr){  
  2.   var oEditor = FCKeditorAPI.GetInstance("content") ;  
  3.   oEditor.SetHTML(codeStr) ;  
  4. }  

使用FCKEditor时使用js在光标处添加任意字符串

  1. function InsertHTML(e,inStr)//e：FCKEditor的ID，inStr:要插入的信息  
  2. {  
  3.         var oEditor = FCKeditorAPI.GetInstance(e) ;  
  4.        if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )  
  5.           {  
  6.            oEditor.InsertHtml( inStr ) ;  
  7.         }  
  8.          else  
  9.             alert("You must be on WYSIWYG mode!" ) ;  
  10. }  

FCKeditor提供了一套完整的API.当编辑器对象被载入后,可以使用这些API操作它.

FCK 编辑器加载后，将会注册一个全局的 FCKeditorAPI 对象。这个对象是操作页面内任何编辑器(一个页面可以有多个编辑器)的入口点.当页面放置了一个编辑器,你只要提供实例名如:InstanceName.调用FCKeditorAPI.GetInstance方法即可得到编辑器对象.如:

  1. var oEditor = FCKeditorAPI.GetInstance('InstanceName') ;  

FCKEditor编辑器对象

GetInstance方法返回的编辑器对象有下列属性和方法:

* Description = string
* EditMode = Integer
* Name = string
* Status = Integer
* function AttachToOnSelectionChange(functionPointer)
* function CleanAndPaste(html)
* function CreateElement(tag)
* function CreateLink(url)
* function ExecOnSelectionChange() //Fires OnSelectionChange event in event manager
* function ExecOnSelectionChangeTimer()
* function ExecuteNamedCommand(commandName, commandParameter)
* function ExecuteRedirectedNamedCommand(commandName, commandParameter)
* function Focus()
* function GetHTML(format) // doesnt work. Use GetXHTML instead.
* function GetNamedCommandState(commandName)
* function GetNamedCommandValue(commandName)
* function GetXHTML(format)
* function InitializeBehaviors()
* function InsertElement(element)
* function InsertElementAndGetIt(e)
* function InsertHtml(html)
* function IsDirty();
* function MakeEditable()
* function OnDoubleClick(element)
* function Paste()
* function PasteAsPlainText()
* function PasteFromWord()
* function Preview()
* function RegisterDoubleClickHandler(handlerFunction, tag)
* function ResetIsDirty();
* function SetHTML(html, forceWYSIWYG)
* function SetStatus()
* function ShowContextMenu(x, y)
* function SwitchEditMode()
* function UpdateLinkedField() 

FCKEditor编辑器的事件

如果编辑器加载完成,一个函数将可能会被调用.如果这个函数被定义了,这个函数名必须是:FCKeditor_OnComplete,相关编辑器的实例是该函数的参数.使用这个函数可以执行一些初始化代码.示例: 

  1. function FCKeditor_OnComplete( editorInstance )  
  2. {  
  3. alert( editorInstance.Name ) ;  
  4. }  

除了上边的标准事件外. FCKeditor实例有一个事件管理器对象.它用来监听事件是否被触发.例如:监听OnSelectionChange事件的自定义处理代码.  

  1. var counter = 0 ;  
  2. function DoSomething( editorInstance )  
  3. {  
  4. window.document.title = editorInstance.Name + ' : ' + ( ++counter ) ;  
  5. }  
  6. function FCKeditor_OnComplete( editorInstance )  
  7. {  
  8. editorInstance.Events.AttachEvent( 'OnSelectionChange', DoSomething ) ;  
  9. }  

注意:每个回调函数都把编辑器实例作为参数. 

下面是有效的事件列表:

OnSelectionChange: 当在编辑器内的选择区改变时触发.

OnAfterSetHTML: 当编辑器内的html被载入后触发,包括改变试图.

OnStatusChange:当编辑器的状态发生改变时触发. 编辑器的有效状态: FCK_STATUS_NOTLOADED, FCK_STATUS_ACTIVE and FCK_STATUS_COMPLETE. 

OnPaste: 在编辑器内粘贴时触发.

posted @ 2012-02-01 15:13  one light  阅读(2394)  评论(0)    收藏  举报