FCKeditor JavaScript API

來源:互聯網
上載者:User

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

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 "Events").

Retrieving an Editor Instance

From out of an external script:

When placing the editor in the page, you give it an "instance name". To retrieve it, you must simply call the FCKeditorAPI.GetInstance method. For example:

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

From out of a dialog of the editor:

Call the InnerDialogLoaded to get the FCK Object. Read more in this HOWTO link=dead

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

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. * Status = (integer) The editor status (loading status). * EditorDocument = (object) The DOM Document object for the editing area. * EditorWindow = (object) The DOM Window object for the editing area.Methods: * AttachToOnSelectionChange( functionPointer ) * Focus() * GetXHTML( formatted ) * InsertElement(element) * InsertElementAndGetIt(e) * InsertHtml(html)  // Inserts HTML in the current cursor position * IsDirty()  // Checks if the content in the editor has been changed * MakeEditable() * ResetIsDirty()  // Resets the dirty state * 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. * GetHTML() // retrieves the edited html from the editor. * SwitchEditMode() * UpdateLinkedField()

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:

function FCKeditor_OnComplete( editorInstance ){    alert( editorInstance.Name ) ;}

Other than the above standard function, every FCKeditor instance has an "Event" object that can be used to listen for events to be fired. For example, the following code listens for the "OnSelectionChange" to execute custom code:

function FCKeditor_OnComplete( editorInstance ){    editorInstance.Events.AttachEvent( 'OnSelectionChange', DoSomething ) ;}var counter = 0 ;function DoSomething( editorInstance ){    // This is a sample function that shows in the title bar the number of times    // the "OnSelectionChange" event is called.    window.document.title = editorInstance.Name + ' : ' + ( ++counter ) ;}

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.
OnAfterSetHTML
Fired once the HTML is loaded in the editor (including when changing views).
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.

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.

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:

oEditor.InsertHtml(HTML);

Triggering a toolbar button / command:

oEditor.Commands.GetCommand(commandName).Execute();

(See more info in the HOWTO in the forums: https://sourceforge.net/forum/forum.php?thread_id=1558711&forum_id=257180 link=dead)

Disabling toolbar buttons:

oEditor.EditorWindow.parent.FCKToolbarItems.LoadedItems[commandName].Disable();

(See more info in the HOWTO in the forums: https://sourceforge.net/forum/forum.php?thread_id=1598024&forum_id=257180) (Using the Disable function of a button is the proper way of disabling instead of overwriting the Execute command of a button, which is described in the first post of the HOWTO thread)

Setting a config value:

oEditor.Config['<configVariableName>'] = 'newValue';

Change editor document style at runtime:

oEditor.EditorDocument.body.style.cssText += 'color: #322805; background-color: #F7C928;' ;

Working with the selection in the editor: Use the Selection Object, see https://sourceforge.net/forum/forum.php?thread_id=1602208&forum_id=257180 link=dead

Set or get anything of the editor:

FCKeditorAPI.GetInstance('InstanceName').EditorWindow.parent...

(See more info in the HOWTO in the forums: http://sourceforge.net/forum/forum.php?thread_id=1610646&forum_id=257180 link=dead)

Add a dynamic Save function

This allows you to assign a function that gets called when the Save button is clicked or the default save key is pressed (CTRL-SHIFT-S):

// called on savefunction 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;}

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.