HTForWeb编辑器使用手册0.2.3.pdfVIP

2D 编辑器使用手册 目录 1. 运行编辑器 1 2. 如何将编辑器嵌入到工程 1 3. 编辑器包中help帮助文件夹2 3. 端口配置 3 4. 如何切换国际化、如何自定义国际化内容 3 5. custom 目录下的文件夹 3 6. 编辑器中的目录在文件夹中对应的位置如下： 3 7. 图纸 （拓扑图）编辑 5 8. 图标 （矢量）编辑 6 9. 组件编辑 6 10. 矢量数据绑定 7 11. 自定义属性编辑及国际化配置 7 12. 参考示例 8 A. 例子1--图标数据绑定 8 B. 例子2--图标数据绑定 10 C. 例子3--图纸数据绑定 13 13. 编辑器中事件处理 17 14. 导入SVG及CAD 的转换 18 15. 如何将编辑器嵌入系统 18 1. 运行编辑器 安装完nodejs，在命令提示符中进入编辑器包中的server文件夹（或者直接进入server.js 所在的文件夹），输入命令 “ ”，编辑器就会在默认的浏览器中打开。 node server.js 2. 如何将编辑器嵌入到工程 HT 就类似于一个前端的JS 库，无论后台是什么，都可以添加进工程中，编辑器就是一个 div， HT 的组件一般都会嵌入 BorderPane、SplitView 和TabView 等容器中使用，而最外层的HT 组件则需要用户手工将getView() 返回的底层div 元素添加到页面的DOM 元素中，这里需 要注意的是，当父容器大小变化时，如果父容器是BorderPane 和SplitView 等这些HT 预定 义的容器组件，则HT 的容器会自动递归调用孩子组件invalidate 函数通知更新。但如果父 容器是原生的html 元素， 则HT 组件无法获知需要更新，因此最外层的HT 组件一般需要 监听window 的窗口大小变化事件，调用最外层组件invalidate 函数进行更新。 为了最外层组件加载填充满窗口的方便性，HT 的所有组件都有addToDOM 函数，其实现逻 辑如下，其中iv 是invalidate 的简写： addToDOM = function(){ var self = this, view = self.getView(), style = view.style; document.body.appendChild(view); style.left = 0; style.right = 0; style.top = 0; style.bottom = 0; window.addEventListener(resize, function () { self.iv(); }, false); } 3. 编辑器包中help帮助文件夹 1 customProperties.txt HT 编 辑 器 自定 义 属 性 页 说 明 。可 通 过 配 置 hteditor_config.customProperties 增加自定义属性。 2 编辑器派发事件说明。 中的三种事件监听方式。 events.txt HT HT 3 expandedTitles.txt HT 编辑器属性标题组展开状态。可通过这个文件修改属性标 题的展开与合并。 4 编辑器属性页过滤器说明。在这个文件中是 默认的属性 inspectorFilters.txt HT HT 过滤配置以及属性栏右上方的“简化属性”的过滤配置，可自己添加删除 定义的函数进 HT 行过滤。 5 menus.txt HT 编辑器菜单项说明。 6 predefinedProperties.txt HT 编辑器预定义属性页说明。编辑