背景
有道云笔记在使用Markdown编辑器的时候存在一些问题,但是在给客服反馈之后并没有解决。因此决定自己动手解决这些问题。
问题1 多出的滚动条
有道云笔记的Markdown编辑器在分屏编辑模式的右侧总会出现两个并列的滚动条,滚动的时候占用空间,而且很丑。如图所示
由于这个问题在客户端和网页端都存在。因此觉得网页端和客户端估计使用的同一套代码。架构估计类似electron。进而查看了一下有道云笔记的程序文件夹的\resources\build
目录,在其中包含了很多与界面显示相关的资源目录,其中mdEditor
目录应当就是 Markdown 编辑器的相关内容。其中文件结构如下
因此估计多出的滚动条很有可能通过修改这个文件夹之中的内容就可以修复。
为了能够查看具体的问题所在。进入网页版的有道云笔记Markdown编辑器,打开开发人员工具,定位右侧滚动条对应的div,发现右侧滚动条是因为左侧的Markdown编辑器上方多出宽22px border css样式,造成整个编辑器的外包框超出了显示范围,所以如果能够把这个样式修复,就不会出现最右侧的滚动条了。如下图所示
这个border样式定义在下面这个样式之中
#editor {
border-top: 22px solid transparent;
}
通过取消这个样式,发现浏览器中右侧的滚动条确实消失了
所以如果想要在客户端修复这个问题,需要在
\resources\build\mdEditor
目录里做一些工作。通过查看
\resources\build\mdEditor
目录,发现其中的主要代码都在 index.html
文件之中,其中id="editor"的那个div就是编辑器对应的代码为了修改这个 editor的样式,采用比较暴力的方法,在index.html文件的<header>中直接添加一段样式代码
<style>
#editor {
border-top: none !important;
}
</style>
保存之后,再次启动有道云笔记,发现确实右侧的滚动条消失了。这下清爽多了。
问题2 输入中文的时候总是出先一个乱码问号
在Markdown编辑器之中输入中文的时候,总是会前置出现一个?一样的字符
这个字符应当是一个乱码字符,具体作用不清楚。但是每次都出现还是很烦人的,而且反应给客服多次,并没有解决。因此决定尝试通过修改对应的客户端文件的方式去掉这个乱码。
由于这个问题同样在客户端和网页端都存在,因此还是使用开发者工具定位一下这个问题具体发生的位置,也就是编辑器。
通过编辑器的代码我们发现原来这个Markdown编辑器实际上是利用 ace Editor 实现的。
进而去搜索ace Editor在中文输入的时候是否出现过问题。还真有人反馈了问题。下面是一段github上的issue的内容
brace.js官网的bug更严重,输入中文不光前面有框,汉字还会重复。
http://thlorenz.com/brace/
而ace最新版
https://ace.c9.io/
没有这个问题
然后在ace的issues里搜索 chinese 发现了一个issue说汉字输入有问题ajaxorg/ace#3099
我推断是brace.js里面的修改版ace editor版本太低有bug,
花了好多时间去将ace最新版合并到brace.js里。
合并后问题没有解决,
才考虑是不是字符的显示问题。brace它是修改版的ace中用到的占位字符
\x01
在 electron 1.6 chrome 56 下
显示成了 " "
ace最新版用的占位字符是
\u2028
在 electron 1.6 chrome 56 下
显示效果类似于 " "我将 \x01 改为 \u00ad 字符不再显示出来
上面指出的是ace的封装brace存在一些输入中文时候的bug,但是随着升级,这些bug已经修复了。而有道云笔记使用的版本比较低,因此还存在这个问题。主要是输入中文的时候有占位符\x01,而这个占位符显示出来就是 ?,因此出现了类似乱码的东西。
解决方法也很简单,将\x01替换为不可见的\u00ad即可。
由于这些占位符实际是在js代码中定义的,仅仅依靠修改index.html不够了,需要修改js文件。而js文件由于进行了压缩,可读性变得很差,需要通过搜索定位到具体的函数。
查找了\resources\build\mdEditor
目录下的全部js文件,发现在vendor-xxxxx.js就是对应ace编辑器所在的js
通过定位与输入法相关的事件 onCompositionEnd onCompositionStart,发现了一个名为 render.showComposition
的函数,进而找到 moveTextAreaToCursor
函数,其中this.textarea.value.replace(/^\x01+/, "");
包含了 \x01 的字符。
为了保证替换完全,全局搜索了 \x01 这个字符,包括以下位置
var PLACEHOLDER = \"\\x01\\x01\";
var val = text.value.replace(/\\x01/g, \"\");
var str = text.value.replace(/\\x01/g, \"\");
str = str.replace(/\\x01/g, \"\");
var val = this.textarea.value.replace(/^\\x01+/, \"\");
将这些地方的 \x01 替换为 \u00ad之后, 输入中文不再显示问号了。