修复有道云笔记客户端显示问题

背景

有道云笔记在使用Markdown编辑器的时候存在一些问题,但是在给客服反馈之后并没有解决。因此决定自己动手解决这些问题。

问题1 多出的滚动条

有道云笔记的Markdown编辑器在分屏编辑模式的右侧总会出现两个并列的滚动条,滚动的时候占用空间,而且很丑。如图所示

Markdown编辑器最右侧多出一个滚动条

由于这个问题在客户端和网页端都存在。因此觉得网页端和客户端估计使用的同一套代码。架构估计类似electron。进而查看了一下有道云笔记的程序文件夹的\resources\build目录,在其中包含了很多与界面显示相关的资源目录,其中mdEditor目录应当就是 Markdown 编辑器的相关内容。其中文件结构如下

\resources\build\mdEditor目录结构

因此估计多出的滚动条很有可能通过修改这个文件夹之中的内容就可以修复。

为了能够查看具体的问题所在。进入网页版的有道云笔记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编辑器之中输入中文的时候,总是会前置出现一个?一样的字符


奇怪的问号字符

这个字符应当是一个乱码字符,具体作用不清楚。但是每次都出现还是很烦人的,而且反应给客服多次,并没有解决。因此决定尝试通过修改对应的客户端文件的方式去掉这个乱码。
由于这个问题同样在客户端和网页端都存在,因此还是使用开发者工具定位一下这个问题具体发生的位置,也就是编辑器。


编辑器的相关html

通过编辑器的代码我们发现原来这个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之后, 输入中文不再显示问号了。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容