3.10.4 客户端API
此例演示了如何利用eWebEditor提供的Client API实现在客户端与编辑器的交互。
要正常使用此代码，请把代码中的"ewebeditor.htm"文件的路径定位到eWebEditor实际的存放的路径。
此例打包在系统的压缩包例子目录中: _example/clientapi.asp(.php/.aspx/.jsp)
|
<HTML> <HEAD> <TITLE>eWebEditor ： 客户端API示例</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <link rel='stylesheet' type='text/css' href='example.css'> </HEAD> <BODY>
<p><b>导航 ： <a href="default.asp">示例首页</a> > 客户端API示例</b></p> <p>您可以用eWebEditor提供的客户端API，对编辑器执行高级操作。更多API，请参见开发手册。</p>
<FORM method="post" name="myform" action="retrieve.asp"> <TABLE border="0" cellpadding="2" cellspacing="1"> <TR> <TD>编辑内容：</TD> <TD> <INPUT type="hidden" name="content1" value="<p>eWebEditor - 在线HTML编辑器，HTML在线编辑好帮手</p>"> <IFRAME ID="eWebEditor1" src="../ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="550" height="350"></IFRAME> </TD> </TR> <TR> <TD colspan=2 align=right> <INPUT type=submit value="提交"> <INPUT type=reset value="重填"> <INPUT type=button value="查看源文件" onclick="location.replace('view-source:'+location)"> </TD> </TR> <TR> <TD>HTML代码：</TD> <TD><TEXTAREA cols=50 rows=5 id=myTextArea style="width:550px">点击“取值”按钮，看一下效果！</TEXTAREA></TD> </TR> <TR> <TD colspan=2 align=right>
<script type="text/javascript"> function DoAPI(s_Flag){ var o_Editor = document.getElementById("eWebEditor1").contentWindow; var o_Text = document.getElementById("myTextArea"); switch(s_Flag){ case "gethtml": o_Text.value = o_Editor.getHTML(); break; case "gettext": o_Text.value = o_Editor.getText(); break; case "sethtml": o_Editor.setHTML("<b>Hello My World!</b>"); break; case "inserthtml": o_Editor.insertHTML("This is insertHTML function!"); break; case "appendhtml": o_Editor.appendHTML("This is appendHTML function!"); break; case "code": o_Editor.setMode("CODE"); break; case "edit": o_Editor.setMode("EDIT"); break; case "text": o_Editor.setMode("TEXT"); break; case "view": o_Editor.setMode("VIEW"); break; case "getcount0": alert(o_Editor.getCount(0)); break; case "getcount1": alert(o_Editor.getCount(1)); break; case "getcount2": alert(o_Editor.getCount(2)); break; case "getcount3": alert(o_Editor.getCount(3)); break; } }
</script>
<INPUT type=button value="取值(HTML)" onclick="DoAPI('gethtml')" class=btn> <INPUT type=button value="取值(纯文本)" onclick="DoAPI('gettext')" class=btn> <INPUT type=button value="赋值" onclick="DoAPI('sethtml')" class=btn> <INPUT type=button value="当前位置插入" onclick="DoAPI('inserthtml')" class=btn> <INPUT type=button value="尾部追加" onclick="DoAPI('appendhtml')" class=btn> <br> <INPUT type=button value="代码状态" onclick="DoAPI('code')" class=btn> <INPUT type=button value="设计状态" onclick="DoAPI('edit')" class=btn> <INPUT type=button value="文本状态" onclick="DoAPI('text')" class=btn> <INPUT type=button value="预览状态" onclick="DoAPI('view')" class=btn> <br> <INPUT type=button value="英文字数" onclick="DoAPI('getcount0')" class=btn> <INPUT type=button value="中文字数" onclick="DoAPI('getcount1')" class=btn> <INPUT type=button value="中英文字数(中文加1)" onclick="DoAPI('getcount2')" class=btn> <INPUT type=button value="中英文字数(中文加2)" onclick="DoAPI('getcount3')" class=btn>
</TD> </TR> </TABLE> </FORM>
</BODY> </HTML> |