CuteEditor makes it easy for you to extend CuteEditor with it's JavaScript API.
The goal of this section is to help you to gain comfort working with
CuteEditor's JavaScript APIs.
Getting the CuteEditor Instance
In order to find the active editor, you would type:
// get the cute editor instance
var editor1 = document.getElementById('CE_Editor1_ID');
var editwin = editor1.GetWindow();
In order to find the active editor document, you would type:
// get the active editor document
var editdoc = editor1.GetDocument();
Getting the Active Editor Selection
In order to find the active editor selection, you would type:
// get the active editor selection
var sel = editor1.GetSelection();
The following table lists the methods and descriptions.
Method | Description |
getHTML() |
This method is used for retrieving the content of CuteEditor as HTML. Example:
// get the cute editor instance
var editor1 = document.getElementById('CE_Editor1_ID'); // retrieving the content of Cute Editor as HTML var content = editor1.getHTML(); alert(content ); |
SetHTML() |
This method is used for setting the content of CuteEditor.
Example:
// get the cute editor instance
var editor1 = document.getElementById('CE_Editor1_ID'); // setting the content of Cute Editor editor1.setHTML("Hello World"); |
PasteHTML() |
This method is used for pasting the specified HTML into a range within an editor document. If anything is selected, the selection is replaced with the new HTML and text. Example:
// get the cute editor instance
var editor1 = document.getElementById('CE_Editor1_ID'); // pasting the specified HTML into a range within a editor document editor1.PasteHTML("Hello World"); |
FocusDocument() |
This method is used for setting input focus to CuteEditor
Example:
// get the cute editor instance
var editor1 = document.getElementById('CE_Editor1_ID'); // setting input focus to Cute Editor editor1. FocusDocument();
|
SetWidth() |
This method is used for setting the width of CuteEditor
Example:
// get the cute editor instance
var editor1 = document.getElementById('CE_Editor1_ID'); // setting the width of CuteEditor editor1. SetWidth("1000"); editor1. SetWidth("1000px");
|
SetHeight() |
This method is used for setting the height of CuteEditor
Example:
// get the cute editor instance
var editor1 = document.getElementById('CE_Editor1_ID'); // setting the height of CuteEditor editor1. SetHeight("1000"); editor1. SetHeight("1000px");
|
The following table lists the events and descriptions.
Events | Description |
CuteEditor_OnInitialized |
This event is invoked immediately after Cute Editor is initialized. Example: function CuteEditor_OnInitialized(editor)
{ var oldexec=editor1.ExecCommand; editor1.ExecCommand=function(cmd,ui,val) { if(cmd=="InsertChars") { alert("Run some code here ...."); //return; } return oldexec.apply(this,arguments); } } |
CuteEditor_OnCommand |
This event is invoked when the command button is clicked.
Example: function CuteEditor_OnCommand(editor,command,ui,value)
{ //handle the command by yourself if(command=="InsertEmotion") { var answer = confirm("Click OK to stop this command.") if (answer){ return true; } else{ return false; } } } |
CuteEditor_OnChange |
This event is invoked when the content of Cute Editor is changed. Example: function CuteEditor_OnChange(editor)
{ //when the content be changed.. document.getElementById("ctl_onchange").innerHTML=editor.id+" changed at "+ new Date().toLocaleTimeString(); } |
FocusDocument() |
This method is used for setting input focus to CuteEditor
Example:
// get the cute editor instance
var editor1 = document.getElementById('CE_Editor1_ID'); // setting input focus to Cute Editor editor1. FocusDocument();
|