修复SAP Webide代码区域录入汉字异常
聆听-往昔 2024-07-20 15:33:01 阅读 69
一、背景
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文件，直接引用这个库生成代码编辑器。
<code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">code>
<title>测试Ace库</title>
</head>
<body>
<div id="editor" style="position: absolute;width: 500px;height: 400px;">some text</div>code>
<script src="./ace-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>code>
<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。
👍点赞，您的支持是我创作的动力！
⭐️收藏，您的青睐是我前行的方向！
✏️评论，您的意见是我成长的财富！
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。