基于Dojo(1.2版本)的简单在线编辑器实现(IE)版本
1 前言项目需要,需要编写一个简单的Python脚本编辑器。Python脚本内容简单,模式固定,形式如下: 脚本中只有两三个固定的对象,对象的属性和方法已知。要求支持关键字高亮显示。并且能够具备类似IDE一样的对象属性联想功能。 拿到这个需求,首先想到的如果要支持高亮显示,只能使用DIV作为文本编辑区域.Dojo的Combox的autoComplet功能可以为我所用。就这么开始吧....... 2 重点代码介绍2.1 自动完成功能dojo的Combox是一个INPUT,而且其AutoComplete是会覆盖整个文本框内的文本,针对这种情况,必须自己定一个全新的Widget.我的策略如下,定义全新的Widget:
这个Widget的属性和代码基本完全照抄了dojo的dijit.form.ComboBoxMixin(定义在dojo的ComboBox.js)。完全拷贝下来不是我需要的,我做的第一步就是修改这个Widget的templateString
由于模版字符串的变化造成了很多原先的方法,属性都不在需要,我做了删除,这里不再赘述。接着需要修改的就是autoComplete提示框的位置.要能跟随光标的变化,IE下是可以获得光标位置的,因此增加如下代码
另外就是Combobox原先只是单个单词,而在线编辑器.需要根据当前鼠标的位置,获得左边的文本以及右边的文本,并获得光标前第一个单词的文本(用于联想对象属性),为此增加如下函数
其中_getCaretPos获得光标位置,getWordBeginIndex获得所联想的单词的起始位置,这样当自动完成的时候,我只需要把光标左边的文本,联想出的文本,光标右边的文本相加即为完成后的文本.如此一来,继续修改原dojo代码中的autocomplete部分代码即可,这一部分比较简单,读者可以参阅最后原代码中的_autoCompleteText函数即可.这里值得提出的就是当DIV中内容发生改变的时候,不能在修改完innerHTML后立即执行对新内容的操作,所以代码中通过setTimeout方式,延时处理修改后的内容。 接下来还需要考虑不同情况下,下拉框结果集的变化,dojo的combobox是根据store属性中的值来构造下拉列表的,因此只需要修改store即可,为此我定义了如下两个成员entityStore,subStoreMap,其中entityStore就是一级对象成员,存储在Store中;二级属性成员存储在 subStoreMap中。举例说明:比如一级对象有个叫bus,r则subStoreMap['bus']存放bus对象的属性.在_onkeyPress函数中增加对'.'的处理,修改store属性即可实现对象属性的联想。当然这个键盘响应函数中还要增加其他的控制,来决定store为空还是一级对象集合. 2.2 关键字高亮功能这个相对比较简单,大体思路是,找出文本中的关键字在文本中的位置,利用textRange的execCommand进行着色和加粗.值得注意的是,对于String的substring一个换行符是两个字符,而在textRange对象中换行是一个字符,所以代码如下
3 Widget代码
这个JS放置于dojo/dijit/form目录下 测试HTML为,读者使用的时候注意修改相对路径 其中一级对象为Customer,Event和GetString,Customer包含BirthDay和Gender两个属性 Event包含Voice和GPRS两个属性 关键字为[if,else,and,or] 效果图如下 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- Cocos2d-x3.3Final(3) Button常用成员函数(C++)
- Vue Ajax跨域请求实例详解
- cocos2d-x3.2中AndroidNDK:Aborting..Stop在Eclipse的处理方
- jaxp解析xml
- ruby-on-rails – Rails统计报告中没有有效的覆盖数据
- PostgreSQL学习手册(客户端命令)
- FlexGrid合并单元格 - zhengjiazeng的日志 - 网易博客
- ruby-on-rails – rails form_tag url path
- 基于react-native,百度地图开发的记录运动轨迹的app Edit
- 未找到数据成员和方法-机房问题4