FCKeditor 2.x/Developers Guide/JavaScript API - Revision history

Martinkou at 06:11, 3 July 2008

2008-07-03T06:11:30Z

Martinkou at 06:28, 2 July 2008

2008-07-02T06:28:25Z

Fredck at 16:22, 9 February 2008

2008-02-09T16:22:26Z

Fredck at 16:22, 9 February 2008

2008-02-09T16:22:00Z

Fredck at 16:21, 9 February 2008

2008-02-09T16:21:39Z

W.olchawa at 10:51, 23 January 2008

2008-01-23T10:51:03Z

W.olchawa at 10:50, 23 January 2008

2008-01-23T10:50:12Z

W.olchawa at 10:49, 23 January 2008

2008-01-23T10:49:30Z

W.olchawa at 12:06, 18 January 2008

2008-01-18T12:06:56Z

W.olchawa at 12:05, 18 January 2008

2008-01-18T12:05:42Z

@@ Line 28: / Line 28: @@
 *'''AttachToOnSelectionChange( functionPointer )'''
 *'''Focus()'''
-*'''SetHTML( html ) - sets the contents of the editor. Note that when using this method, you will loose any listener that you may have previously registered on the editor.EditorDocument.'''
+*'''SetHTML( html ), or SetData( html ) - sets the contents of the editor. Note that when using this method, you will loose any listener that you may have previously registered on the editor.EditorDocument.'''
 *'''GetHTML( formatted ), or GetXHTML( formatted ), or GetData( formatted ) - retrieves the edited html from the editor.'''
 *'''InsertElement( element )'''

@@ Line 1: / Line 1: @@
-== FCKeditor JavaScript API ==
+== FCKeditor JavaScript API  ==
 FCKeditor offers a complete JavaScript API so you can interact with it once the editor is loaded and running.
 Once loaded, the editor registers a global object called '''FCKeditorAPI'''. This object offers the entry point to interact with any editor instance placed in a page (you can have more than one).
 '''NOTE''': The '''FCKeditorAPI''' object will not be available during the page load. You need to wait for the editor to be loaded to use it. If you need to interact with the editor right after is has been loaded, use the "FCKeditor_OnComplete" function (see [[FCKeditor 2.x/Developers Guide/JavaScript API#Events|Events]]).
-== Retrieving an Editor Instance ==
+== Retrieving an Editor Instance  ==
-* '''From out of an external script''' <br>When placing the editor in the page, you give it an "instance name". To retrieve it, you must simply call the '''FCKeditorAPI.GetInstance''' method.<br>Example:<pre>var oEditor = FCKeditorAPI.GetInstance('InstanceName')&nbsp;;
+*'''From out of an external script''' <br>When placing the editor in the page, you give it an "instance name". To retrieve it, you must simply call the '''FCKeditorAPI.GetInstance''' method.<br>Example:<pre>var oEditor = FCKeditorAPI.GetInstance('InstanceName')&nbsp;;
 </pre>
-* '''From out of a dialog of the editor'''<br>Call the InnerDialogLoaded to get the FCKObject.<br>Example:<pre>var oEditor = window.parent.InnerDialogLoaded().FCK&nbsp;;
+*'''From out of a dialog of the editor'''<br>Call the InnerDialogLoaded to get the FCKObject.<br>Example:<pre>var oEditor = window.parent.InnerDialogLoaded().FCK&nbsp;;
 </pre>
 Both methods return the main FCKeditor object that gives the necessary bridge to interact with it. These are the most useful properties and methods of this object:
 Properties:
-* '''Name = ( string )''' - the instance name.
+*'''Name = ( string )''' - the instance name.
-* '''Status = ( integer )''' - the editor status (loading status).
+*'''Status = ( integer )''' - the editor status (loading status).
-* '''EditorDocument = ( object )''' - the DOM Document object for the editing area.
+*'''EditorDocument = ( object )''' - the DOM Document object for the editing area.
-* '''EditorWindow = ( object )''' - the DOM Window object for the editing area.
+*'''EditorWindow = ( object )''' - the DOM Window object for the editing area.
 Methods:
-* '''AttachToOnSelectionChange( functionPointer )'''
+*'''AttachToOnSelectionChange( functionPointer )'''
-* '''Focus()'''
+*'''Focus()'''
-* '''GetXHTML( formatted )'''
+*'''SetHTML( html ) - sets the contents of the editor. Note that when using this method, you will loose any listener that you may have previously registered on the editor.EditorDocument.'''
-* '''InsertElement( element )'''
+*'''GetHTML( formatted ), or GetXHTML( formatted ), or GetData( formatted ) - retrieves the edited html from the editor.'''
-* '''InsertElementAndGetIt( e )'''
+*'''InsertElement( element )'''
-* '''InsertHtml( html )''' - inserts HTML in the current cursor position
+*'''InsertElementAndGetIt( e )'''
-* '''IsDirty()''' - checks if the content in the editor has been changed
+*'''InsertHtml( html )''' - inserts HTML in the current cursor position
-* '''MakeEditable()'''
+*'''IsDirty()''' - checks if the content in the editor has been changed
-* '''ResetIsDirty()''' - resets the dirty state
+*'''MakeEditable()'''
-* '''SetHTML( html )''' - sets the contents of the editor. Note that when using this method, you will loose any listener that you may have previously registered on the editor.EditorDocument.
+*'''ResetIsDirty()''' - resets the dirty state
-* '''GetHTML()''' - retrieves the edited html from the editor.
+*'''SwitchEditMode()'''
-* '''SwitchEditMode()'''
+*'''UpdateLinkedField()'''
-== Events ==
+== Events  ==
 Once the editor loading phase is complete and it is ready to use (and interact with JavaScript), a standard function is called in the page that contains the editor, if the function is defined. This function must be named '''"FCKeditor_OnComplete"''' and receives the related editor instance as the parameter. Using it, you can execute any initial code that may interact with the editor. This is a declaration example:
 <pre>function FCKeditor_OnComplete( editorInstance )
+{
@@ Line 48: / Line 47: @@
+}
 </pre>
 Other than the above standard function, every FCKeditor instance has an "Event" object that can be used to listen for events to be fired.
 Example: the following code listens for the "OnSelectionChange" to execute custom code:
 <pre>function FCKeditor_OnComplete( editorInstance )
+{
@@ Line 65: / Line 64: @@
+}
 </pre>
 Note that every event callback function receives the editor instance as a parameter.
 The following is the list of events available:
-* '''OnAfterLinkedFieldUpdate''' - fired right after the hidden linked field attached to the editor has its contents updated. It happens usually when the form is being posted.
+*'''OnAfterLinkedFieldUpdate''' - fired right after the hidden linked field attached to the editor has its contents updated. It happens usually when the form is being posted.
-* '''OnAfterSetHTML''' - fired once the HTML is loaded in the editor (including when changing views).
+*'''OnAfterSetHTML''' - fired once the HTML is loaded in the editor (including when changing views).
-* '''OnFocus''' - fired when the editor acquires the focus.
+*'''OnFocus''' - fired when the editor acquires the focus.
-* '''OnPaste''' - fired when something is pasted in the editor. The function you specify must return true for the paste to proceed.
+*'''OnPaste''' - fired when something is pasted in the editor. The function you specify must return true for the paste to proceed.
-* '''OnStatusChange''' - fired when the editor status changes. The following constants are also available globally in the page: FCK_STATUS_NOTLOADED, FCK_STATUS_ACTIVE and FCK_STATUS_COMPLETE.
+*'''OnStatusChange''' - fired when the editor status changes. The following constants are also available globally in the page: FCK_STATUS_NOTLOADED, FCK_STATUS_ACTIVE and FCK_STATUS_COMPLETE.
-* '''OnSelectionChange''' - fired when the actual selection in the editor area changes (including cursor position and keystrokes). Note: In IE, this event does not fire on every keystroke, but only on some random keystrokes.
+*'''OnSelectionChange''' - fired when the actual selection in the editor area changes (including cursor position and keystrokes). Note: In IE, this event does not fire on every keystroke, but only on some random keystrokes.
-== Usage Samples ==
+== Usage Samples  ==
 The following are a few samples of things that can be done with the JavaScript API. (In these samples, oEditor = FCKeditorAPI.GetInstance('InstanceName').)
-* '''Insert HTML at cursor position''':<pre>oEditor.InsertHtml(HTML);</pre>
+*'''Insert HTML at cursor position''':<pre>oEditor.InsertHtml(HTML);</pre>
-* '''Triggering a toolbar button / command''':<pre>oEditor.Commands.GetCommand(commandName).Execute();</pre>
+*'''Triggering a toolbar button / command''':<pre>oEditor.Commands.GetCommand(commandName).Execute();</pre>
-* '''Disabling toolbar buttons''':<pre>oEditor.EditorWindow.parent.FCKToolbarItems.LoadedItems[commandName].Disable();</pre>
+*'''Disabling toolbar buttons''':<pre>oEditor.EditorWindow.parent.FCKToolbarItems.LoadedItems[commandName].Disable();</pre>
-* '''Setting a config value''':<pre>oEditor.Config['&lt;configVariableName&gt;'] = 'newValue';</pre>
+*'''Setting a config value''':<pre>oEditor.Config['&lt;configVariableName&gt;'] = 'newValue';</pre>
-* '''Change editor document style at runtime''':<pre>oEditor.EditorDocument.body.style.cssText += 'color: #322805; background-color: #F7C928;'&nbsp;;</pre>
+*'''Change editor document style at runtime''':<pre>oEditor.EditorDocument.body.style.cssText += 'color: #322805; background-color: #F7C928;'&nbsp;;</pre>
-* '''Set or get anything of the editor''':<pre>FCKeditorAPI.GetInstance('InstanceName').EditorWindow.parent...</pre>
+*'''Set or get anything of the editor''':<pre>FCKeditorAPI.GetInstance('InstanceName').EditorWindow.parent...</pre>
-* '''Add a dynamic Save function''':
+*'''Add a dynamic Save function''':
-<pre>
+<pre>// called on save
 function doSave(){
          alert('Saved.');
@@ Line 98: / Line 96: @@
          editorInstance.LinkedField.form.onsubmit = doSave;
+}
 </pre>
 *'''Working with the selection in the editor''': Use the Selection Object

@@ Line 53: / Line 53: @@
 <pre>function FCKeditor_OnComplete( editorInstance )
+{
-editorInstance.Events.AttachEvent( 'OnSelectionChange', DoSomething )&nbsp;;
+    editorInstance.Events.AttachEvent( 'OnSelectionChange', DoSomething )&nbsp;;
+}

@@ Line 53: / Line 53: @@
 <pre>function FCKeditor_OnComplete( editorInstance )
+{
-    editorInstance.Events.AttachEvent( 'OnSelectionChange', DoSomething )&nbsp;;
+editorInstance.Events.AttachEvent( 'OnSelectionChange', DoSomething )&nbsp;;
+}
 var counter = 0&nbsp;;
 function DoSomething( editorInstance )
+{

@@ Line 45: / Line 45: @@
 <pre>function FCKeditor_OnComplete( editorInstance )
+{
-alert( editorInstance.Name )&nbsp;;
+    alert( editorInstance.Name )&nbsp;;
+}
 </pre>
@@ Line 53: / Line 53: @@
 <pre>function FCKeditor_OnComplete( editorInstance )
+{
-editorInstance.Events.AttachEvent( 'OnSelectionChange', DoSomething )&nbsp;;
+    editorInstance.Events.AttachEvent( 'OnSelectionChange', DoSomething )&nbsp;;
+}
 var counter = 0&nbsp;;
 function DoSomething( editorInstance )
+{
-// This is a sample function that shows in the title bar the number of times
+    // This is a sample function that shows in the title bar the number of times
-// the "OnSelectionChange" event is called.
+    // the "OnSelectionChange" event is called.
-window.document.title = editorInstance.Name + '&nbsp;: ' + ( ++counter )&nbsp;;
+    window.document.title = editorInstance.Name + '&nbsp;: ' + ( ++counter )&nbsp;;
+}
 </pre>

@@ Line 84: / Line 84: @@
 * '''Change editor document style at runtime''':<pre>oEditor.EditorDocument.body.style.cssText += 'color: #322805; background-color: #F7C928;'&nbsp;;</pre>
 * '''Set or get anything of the editor''':<pre>FCKeditorAPI.GetInstance('InstanceName').EditorWindow.parent...</pre>
-* '''Add a dynamic Save function''':<pre>// called on save
+* '''Add a dynamic Save function''':
 function doSave(){
-alert('Saved.');
+        alert('Saved.');
-document.getElementById('someElement').innerHTML = 'Saved!';
+        document.getElementById('someElement').innerHTML = 'Saved!';
-return false; //this disables default action (submitting the form)
+        return false; //this disables default action (submitting the form)
+}
 // called when FCKeditor is done starting..
 function FCKeditor_OnComplete( editorInstance ){
-editorInstance.LinkedField.form.onsubmit = doSave;
+        editorInstance.LinkedField.form.onsubmit = doSave;
+}
 </pre>
 * '''Working with the selection in the editor''': Use the Selection Object

← Older revision		Revision as of 12:05, 18 January 2008
Line 73:		Line 73:
	* '''OnStatusChange''' - fired when the editor status changes. The following constants are also available globally in the page: FCK_STATUS_NOTLOADED, FCK_STATUS_ACTIVE and FCK_STATUS_COMPLETE.		* '''OnStatusChange''' - fired when the editor status changes. The following constants are also available globally in the page: FCK_STATUS_NOTLOADED, FCK_STATUS_ACTIVE and FCK_STATUS_COMPLETE.
	* '''OnSelectionChange''' - fired when the actual selection in the editor area changes (including cursor position and keystrokes). Note: In IE, this event does not fire on every keystroke, but only on some random keystrokes.		* '''OnSelectionChange''' - fired when the actual selection in the editor area changes (including cursor position and keystrokes). Note: In IE, this event does not fire on every keystroke, but only on some random keystrokes.
		+
		+	== Usage Samples ==
		+
		+	The following are a few samples of things that can be done with the JavaScript API.
		+	(In these samples, oEditor = FCKeditorAPI.GetInstance('InstanceName').)
		+
		+	* Insert HTML at cursor position:<pre>oEditor.InsertHtml(HTML);</pre>
		+	* Triggering a toolbar button / command:<pre>oEditor.Commands.GetCommand(commandName).Execute();</pre>
		+	* Disabling toolbar buttons:<pre>oEditor.EditorWindow.parent.FCKToolbarItems.LoadedItems[commandName].Disable();</pre>
		+	* Setting a config value:<pre>oEditor.Config['<configVariableName>'] = 'newValue';</pre>
		+	* Change editor document style at runtime:<pre>oEditor.EditorDocument.body.style.cssText += 'color: #322805; background-color: #F7C928;' ;</pre>
		+	* Set or get anything of the editor:<pre>FCKeditorAPI.GetInstance('InstanceName').EditorWindow.parent...</pre>
		+	* Add a dynamic Save function:<pre>
		+	// called on save
		+	function doSave(){
		+	alert('Saved.');
		+	document.getElementById('someElement').innerHTML = 'Saved!';
		+	return false; //this disables default action (submitting the form)
		+	}
		+	// called when FCKeditor is done starting..
		+	function FCKeditor_OnComplete( editorInstance ){
		+	editorInstance.LinkedField.form.onsubmit = doSave;
		+	}
		+	</pre>
		+	* Working with the selection in the editor: Use the Selection Object