您当前的位置：飞诺网 >> 网页设计 >> Javascript >> Javascript系列教程
使用DHTML实现可视化编辑自定义表情JavaScript程序及演示
www.diybl.com 时间 ： 2011-06-02 作者：佚名 编辑：hawk 点击： [ 评论 ]
为了提高用户体验和站点的运行效率，本站(http://www.shatangoj.cn)利用DHTML特性开发了可以可视化编辑自定义表情的JavaScript程序。
程序文件：
/sites/all/modules/smileys/smileys.js
/sites/all/modules/ojcustom/wyzz.js
/misc/drupal.js
自定义表情代码和图片对应关系的配置的JavaScript语法如下：
Drupal.extend({ settings:{ "smileys": { "codeImgMap": "{code:\"/pflaster\",img:\"\x3cimg code=\\\"/pflaster\\\" src=\\\"/sites/all/modules/smileys/packs/miranda/pflaster.png \\\" title=\\\"/pflaster\\\" alt=\\\"/pflaster\\\" /\x3e\"},{code:\":(\",img:\"\x3cimg code=\\\":(\\\" src=\\\"/sites/all/modules/smileys/packs/miranda/sad.png\\\" title=\\\":( :-( /sad\\\" alt=\\\":( :-( /sad\\\" /\x3e\"},...(这里省略)}" }}}); 注意，上面的语法中,code表示表情图片对应的代码。而img表示表情图片对应的网页控件的HTML代码，图片控件包含code的属性。
使用方法：
假设要实现可编辑自定义表情的input或者textarea的ID为txt1,使txt1可以可视化编辑表情程序的JavaScript接口代码为：
- 1.初始化编辑框
wyzz_ini("txt1",bShowToolBar,width,height); //其中，后三个参数可以忽略。第二个参数（true or false）表示是否显示编辑工具栏。第二个和第三个
//参数表示编辑框的宽度和高度，如果这两个参数为空，则编辑框与txt1大小一致。
2.为了使得编辑框可以自动替换表情符号为表情图片，需要注册击键事件处理程序
wyzz_addEventListener("keyup", Drupal.smileys.makeSmileysOnEdit,"txt1"); 3.把包含表情图片的HTML代码转换成为包含表情代码的HTML代码
Drupal.smileys.HtmlToCode(html_include_smiley_imgs); //html_include_smiley_imgs为要转换的HTML代码
4.把包含表情代码的HTML代码转换成为包含表情图片的HTML代码
Drupal.smileys.codeToHTML(html_include_smiley_codes); //html_include_smiley_codes为要转换的HTML代码
5.取消可视化编辑自定义表情,输入框内容不变
wyzz_cancel_edit("txt1"); 6.完成编辑
wyzz_doneAndUpdateSource("txt1");
本程序在IE7和FireFox2之下测试通过。
演示地址：
http://www.shatangoj.cn/node/243
