这是一篇关于知乎编辑器的专栏文章。

这是一篇关于知乎编辑器的专栏文章。

过去一段时间内,我们常常收到「编辑器太难用了,又有 bug 啦」、「你们怎么还没修好」、「知乎变了,都不支持公式了」等反馈。大家的鞭策,我们都收到了 ... (。•ˇ‸ˇ•。) 编辑器团队也进行了持续地优化和调整,今天终于鼓起「勇气」和知友们分享编辑器最近的进展(文末有彩蛋 )。


1. 丰富公式涵盖内容并优化其展现形式,以满足专业领域知友们的使用需求

公式工具栏进行了扩充,提供了基本的公式符号,包括希腊字母,常用数学运算符、关系符、上下标、积分号等;更丰富的公式也可以通过输入 LaTeX 代码添加;采用矢量高清的 SVG 格式进行渲染,公式可在任何屏幕上高清展示;为了更好地改善大家的体验,我们也优化了公式的报错提示。此外,编辑器也可以支持代码块与文字相连的「行内代码」啦。

举例子来感受一下:

  • 化学公式

3\ce{Cu}+8\ce{HNO3}\rightarrow 3\ce{Cu(NO3)2}+2\ce{NO}\uparrow+4\ce{H2O}\\

  • 矩阵

\begin{bmatrix} a & b & c \\ d & e & \frac{f}{g} \\ \gamma & \delta & \omega \end{bmatrix} , \begin{Bmatrix} a & b & c \\ d & e & \frac{f}{g} \\ \gamma & \delta & \omega \end{Bmatrix} , \begin{pmatrix} a & b & c \\ d & e & \cfrac{f}{g} \\ \gamma & \delta & \omega \end{pmatrix} , \begin{vmatrix} a & b & c \\ d & e & \cfrac{f}{g} \\ \gamma & \delta & \omega \end{vmatrix} , \begin{Vmatrix} a & b & c \\ d & e & \cfrac{f}{g} \\ \gamma & \delta & \omega \end{Vmatrix} , \begin{matrix} a & b & c \\ d & e & \frac{f}{g} \\ \gamma & \delta & \omega \end{matrix}\\

  • 希腊字母

\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa \lambda\mu\nu\xi\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega \Gamma\Delta\Theta\Lambda\Xi\Pi\Sigma\Upsilon\Phi\Psi\Omega \\ \digamma\varepsilon\vartheta\varkappa\varpi\varrho\varsigma\varphi \varGamma\varDelta\varTheta\varLambda\varXi\varPi\varSigma\varUpsilon \varPhi\varPsi\varOmega

  • 上下标、箭头

\acute{a} \check{a} \grave{a} \tilde{a} \bar{a} \ddot{a} \hat{a} \vec{a} \breve{a} \dot{a} \mathring{a} \dddot{a} \ddddot{a} \widetilde{abc} \widehat{abc} \overleftarrow{abc} \overrightarrow{abc} \overline{abc} \underline{abc} \overbrace{abc} \underbrace{abc} \overleftrightarrow{abc} \underleftrightarrow{abc} \underleftarrow{abc} \underrightarrow{abc} \xleftarrow{abc} \xrightarrow{abc} \sqrt{abc} \sqrt[n]{abc}

我们也发现已经有知友分享了一些公式教程,在此特别感谢 @Milo Yip @梁昊,也欢迎移步欣赏:知乎「插入公式」诀窍

2. 优化了图片的上传和编辑体验

编辑器可支持拖拽图片至任意位置上传;增加上传的占位和状态提示,帮助知友们更明晰地了解上传位置和进度;也可以选中图片进行调整尺寸大小,或用「图片注释」功能优雅地解释图片的背后故事。

3.更便捷地修改链接

对于链接,除了在工具栏插入外,还支持手动输入,编辑器系统都会自动识别并获取链接信息,同时知友们还可以对此链接进行编辑修改。马上,链接还会支持自动转化成卡片样式,满足知友们对链接展示的需求效果。

以上两点,可以在视频中直观感受:

https://www.zhihu.com/video/919560754460508160


除了上述优化外,我们修复了编辑器或大或小的线上问题。修复问题本不应该多说,但相信很多知友对编辑器问题的修复充满好(yi)奇(wen)。

编辑器对浏览器、操作系统具有较强的依赖性,环境相对多样且复杂。因此,我们在上线前会进行至少三次测试,从本地集成环境到次轮预发环境,再到内部网络环境。上线后,也会进行回测。经过多次适配,编辑器和 Chrome、Safari、Sogou Explorer、QQ 和 360 等浏览器已相对兼容。但坦率地讲,在一些相对小众的浏览器上也确实容易产生兼容性问题,收到反馈后,我们会询问浏览器版本、操作系统等信息进行定位,也就耗费了一些时间。

此外,某些问题可能也与当时的本地网络或操作有关,定位会较复杂。有的需多次尝试才能复现,有的甚至完全不能复现。因此修复时间也相对较长,也就出现了大家所说的「你们到底修没,为什么这么慢」现象。

针对这些问题,我们也优化了原有的反馈流程:保证反馈的问题都能第一时间找到相应负责人进行排查、定位和修复;严重问题出现后,我们也有相应的复盘制度。目前,结合反馈我们已经修复了插入多行超链接,发布后超链接无法分行、公式无法插入行内、站内链接有时无法识别标题等多个问题。

再次,感谢知友们的鞭策和鼓励。我们知道这是应该做的,并且做得还不够,我们还会持续优化。大家如遇使用问题,请私信联系 @知一声,因为编辑器的特殊性,反馈时如果能注明发生问题时的电脑操作系统和浏览器版本信息,就最好啦。


最后!我们真诚地感谢每一位对科学有所追求的小伙伴,你们对专业知识的热情与向往,帮助很多知友发现了更大的世界。我们也制作了一个关于公式的电影片段混剪,希望大家也能够在光与影的故事当中,感受到科学的魅力,及人类对科学无尽追求所带来的感动。

混剪中一共出现了 17 部影片,欢迎知友们在评论区猜一猜电影的名字或者公式名称,截至 12 月 2 日 18 点,我们会从正确猜出 3 部电影名,或任一公式名称的知友中,随机抽取 17 位,赠送神秘礼物一份。

再次感谢每一位关心我们的知友。

https://www.zhihu.com/video/919559434760507392

(打开声音效果更佳)

编辑于 2017-12-01

文章被以下专栏收录