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对象参考章节。