Extending CuteEditor with JavaScript API

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');

Getting the Active Editor Window

In order to find the active editor window, you would type:

// get the active editor window

var editwin = editor1.GetWindow();

Getting the Active Editor Document

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();

Methods and Descriptions

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");

Events and Descriptions

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();

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");`

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();`