eWebEditor Manual V11.2 : Developer Guide : Integration : Call Plain JavaScript

3.3.2 Call Plain JavaScript

Notes: this is the new function of the 8.0 version.

By using the calling method of the plain JavaScript, it is very convenient to create, delete, replace and insert cases of the WebEditor editor, and also to visit the interfaces of the eWebEditor editor, which is especially suitable for the application requirements of the Ajax project.

In your web page, only two steps and two lines of codes are needed in the following to create a case of the eWebEditor editor by the method of the plain JavaScript.

First step: referential common script interface files

Add referential common script files to the web page <head></head>, as follows:

<head>

</head>

ewebeditor.js is a common interface file, and the specific path should be respectively modified according to the practical layout of your web page.

Second step: create an editor instance

After the reference in the first step, you can use the "EWEBEDITOR" global object in the web page. You can create an editor instance by several methods of the object.

First method:

Create the editor case directly in the places where needed, as follows:

<form>

EWEBEDITOR.Create("content1", {style:'coolblue', width:'550', height:'350'}, "value");

</script>

</form>

The HTML Code just like below:

<form>

<textarea name="content1" style="display:none">value</textarea>

</form>

Second method:

Replace the existing <INPUT>textbox or <TEXTAREA> textbox or DIV.

<form>

<textarea name="textarea1"> Initial Value</textarea>

<div id="div1">Initial Value</div>

EWEBEDITOR.Replace("textarea1", {style:'coolblue', width:'550', height:'350'});

EWEBEDITOR.Replace("div1", {style:'coolblue', width:'100%', height:'350'});

</script>

</form>

After running, two editors will appear, actually equal to the following HTML codes:

<form>

<textarea name="textarea1">Initial Value</textarea>

<div id="div1">Initial Value</div>

</form>

Notes: you also can handle the script in the window.onload event, or use other operators to trigger it. When the editor instance is deleted, the editing content can retreat to the original replaced object.

Third method:

Create a new editor instance, and append it into an existing DIV.

EWEBEDITOR.Append("div1", {style:'coolblue', width:'550', height:'350'}, "Initial Value");

</script>

After running, actually equal to the following HTML codes:

<textarea name="auto1" style="display:none">Initial Value</textarea>

</div>

Fourth method:

Use style names to replace the <TEXTARE> textbox as a eWebEditor editor instance.

<textarea name="textarea1" class="ewebeditor">Initial Value</textarea>

After running, actually equal to the following HTML codes:

<textarea name="textarea1">Initial Value</textarea>

Fifth method:

Replace all the <TEXTAREA> textboxes as eWebEditor editors for one time.

function _Onload(){

EWEBEDITOR.ReplaceAll();

}

if ( window.addEventListener ){

window.addEventListener( 'load', _Onload, false );

}else if ( window.attachEvent ){

window.attachEvent( 'onload', _Onload );

}

</script>

After the above scripts are executed, all <TEXTAREA> in this web page will be replaced as editor instances. This method can set more parameters, and only replace several specified ones, and also can specify different configurations for each editor, please see the details in relevant sections.

Notes: the above methods only give a demonstration of the simplest creating methods, and each method still can set more parameters and more self-defining term. Please see the details in the reference sections of the EWEBEDITOR object.