一、背景
SAP Webide个人版上次更新时间还停留在2018年。针对产品出现的bug和优化方面,官方应该也不会再维护了,因为SAP现在主推BTP(Business Technology Platform)里的BAS(Business Application Studio)开发工具以及VS Code安装Fiori Tools插件实现Fiori应用开发。
虽然但是,SAP Webide在笔者看来依旧是一个不错的开发工具,特别是在刚接触SAP UI5开发时,此工具需配置的东西少,可离线开发,构建新项目迅速。
SAP Webide有一个被众多国内Fiori开发顾问诟病的地方,就是针对汉字录入有问题,极其不友好。如下图是原版本的故障演示:
二、问题定位
通过UI5 Inspector插件看到代码区域对应的控件是aceeditor,相当于封装的一个自定义控件,sap.watt.common.plugin.aceeditor.control.Editor。(对JS了解多的顾问可能根据名字就知道这个控件底层是做了什么,没错,就是基于开源库Web编辑器ace.js封装的一个代码编辑器。不了解也没关系,接着往下分析。)
如果还不知道这个控件在Webide的哪个路径,可以接着测试,在初次进入右侧代码编辑窗口时,会加载aceeditor的CSS,在网络请求中能看到具体路径。
(/webide/resources/sap/watt/ideplatform/plugin/aceeditor/css/aceeditor.css)
此时我们便可在自己电脑Webide解压路径找到Editor.js,和它在同目录下的lib文件夹里面也只有ace-noconflict。(无冲突的一个开源ace.js库)
我们现在可以验证是不是这个库出问题了,毕竟Webide多年未维护,依赖库也没更新过。我们在ace-noconflict文件夹同路径建了一个testAce.html文件,直接引用这个库生成代码编辑器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试Ace库</title>
</head>
<body>
<div id="editor" style="position: absolute;width: 500px;height: 400px;">some text</div>
<script src="./ace-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>ace.edit("editor");</script>
</body>
</html>
直接浏览器打开testAce.html,如下图为运行效果,发现果然是ace库出问题了。
三、解决步骤
知道是库出问题了,我们可以去ace的官网或者github找最新可用的ace库,下面两个链接供参考学习。(笔者直接在ace官网打开供测试体验的在线编辑器,试了打中文没问题,就知道意味着成功就在眼前)
ace官网:https://ace.c9.io/
github的ace预打包版本库:https://github.com/ajaxorg/ace-builds/releases/tag/v1.5.0
先将如下图lib文件夹中的ace-noconflict重命名成其它名字做备份,再将ace-builds-1.5.0.zip压缩包里的src-noconflict文件夹完整复制到截图lib路径并重命名为ace-noconflict。
四、效果展示
在我们重启SAP Webide后,录入汉字已经正常了。终于是解决了一个折磨国内使用SAP Webide工具的Fiori开发顾问多年的一个烦心Bug。
👍点赞,您的支持是我创作的动力!
⭐️收藏,您的青睐是我前行的方向!
✏️评论,您的意见是我成长的财富!
版权归原作者 聆听-往昔 所有, 如有侵权,请联系我们删除。