eWebEditor首页 >> eWebEditor帮助文档 V11.5 >> 开发手册 >> 集成调用

3.3.2 纯JavaScript调用

注:此功能为V8.0版新增功能。

使用纯JavaScript调用方法,您可以方便的创建、删除、替换、插入eWebEditor编辑器实例,您还可以更方便的访问eWebEditor编辑器的各项接口。特别适应用于Ajax项目中的应用需求。

在您的网页,使用纯JavaScript方法创建一个eWebEditor编辑器实例,简单的您只需要以下两步两行代码即可。

 

第一步:引用通用脚本接口文件

在网页<head></head>中加入引用通用脚本文件。如下:

<head>

<script type="text/javascript" src="....../ewebeditor/ewebeditor.js"></script>

</head>

ewebeditor.js 为通用接口文件,具体路径要看您实际网页的布署而相应修改。

 

第二步:创建编辑器实例

第一步中的引用后,您将可以在网页中使用全局的“EWEBEDITOR”对象。您可以使用这个对象的多种方法来创建编辑器实例。

 

1种方法:

直接在需要的地方,创建编辑器实例,如下:

<form>

<script type="text/javascript">

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

</script>

</form>

运行后的HTML代码相当于如下:

<form>

<textarea name="content1" style="display:none">初始值</textarea>

<iframe src="ewebeditor.htm?id=content1&style=coolblue" width="550" height="350"></iframe>

</form>

 

2种方法:

替换已经存在的<INPUT>文本框或<TEXTAREA>文本框或DIV

<form>

<textarea name="textarea1">初始值</textarea>

<div id="div1">初始值</div>

<script type="text/javascript">

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

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

</script>

</form>

运行后,将会出现两个编辑器。实际相当于如下的HTML代码:

<form>

<textarea name="textarea1">初始值</textarea>

<iframe src="ewebeditor.htm?id=textarea1&style=coolblue" width="550" height="350"></iframe>

<div id="div1">初始值</div>

<iframe src="ewebeditor.htm?id=div1&style=coolblue" width="100%" height="350"></iframe>

</form>

注:您也可以在window.onload事件中处理此脚本,或其它按钮点击来触发此脚本。当编辑器实例删除时,编辑的内容可以返回到原来替换的对象上。

 

3种方法:

新建一个编辑器实例,并把她插入一个已经存在的DIV中。

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

<script type="text/javascript">

EWEBEDITOR.Append("div1", {style:'coolblue', width:'550', height:'350'}, "初始值");

</script>

运行后,实际相当于是如下的HTML代码:

<div id="div1">

  <textarea name="auto1" style="display:none">初始值</textarea>

  <iframe src="ewebeditor.htm?id=auto1&style=coolblue" width="550" height="350"></iframe>

</div>

 

4种方法:

使用样式类名把<TEXTARE>文本框替换为eWebEditor编辑器实例。

<textarea name="textarea1" class="ewebeditor">初始值</textarea>

运行后,实际相当于是如下的HTML代码:

<textarea name="textarea1">初始值</textarea>

<iframe src="ewebeditor.htm?id=textarea1&style=coolblue" width="100%" height="350"></iframe>

 

5种方法:

一次性替换所有的<TEXTAREA>文本框为eWebEditor编辑器。

<script type="text/javascript">

function _Onload(){

     EWEBEDITOR.ReplaceAll();

}

 

if ( window.addEventListener ){

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

}else if ( window.attachEvent ){

     window.attachEvent( 'onload', _Onload );

}

</script>

执行上面脚本后,本网页的所有<TEXTAREA>都将被替换为编辑器实例。本方法还有更多使用参数可设,可以实现只替换指定的几个,也可以为每个编辑器指定不同的配置,具体请参看相关章节。

 

注:以上方法,只示例了最简单的创建方法,每个方法还有更多的参数可以设置,更多的自定义项。详细请参阅EWEBEDITOR对象参考章节。