五分钟 -- 从零开始搭建属于自己的网页编辑器

最新推荐文章于 2022-03-22 16:32:57 发布

weixin_33989780

最新推荐文章于 2022-03-22 16:32:57 发布

阅读量192

点赞数

原文链接：https://segmentfault.com/a/1190000012927038

版权

当然是不可能的。。。
如果你还有兴趣继续看的话，想和大家交流一下我最近做的一个可以显示行数的textarea。只是一个不到300行代码的小玩具啦。演示和代码
图片描述

（专业的wysiwyg或者代码编辑器，请看quilljs, ace editor等）

最近接到这么一个需求，要对一个textarea的数据进行格式验证。用户会输入几十个几百个IP地址，一行一个。验证是很容易，但是如果出错的话，用户并不知道是哪里出的错。textarea是不能加style的，所以我想能不能显示行数，这样就可以反馈给用户是哪里出错了。

<div>
  <div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </di>
  <textarea></textarea>
</div>

图片描述

css的flexbox可以很好的解决这个问题。（不用写js代码啦）

图片描述

右边textarea如果滚动了，左边的div也要跟着滚。

听scroll事件，更新左边div的transform: translateY()值。这个据说是比top，bottom快。

图片描述

因为用了position: abosolute，所以这一块要手动处理。首先算最长的长度，再更新div的padding-left的值。

图片描述

图中红叉的地方是不该显示行数的，因为是在同一个句子内。这就需要计算一个句子会占多少行。这就麻烦了，这一块我写的不好。

首先要算一行能放多少的字符。我用的方法是新建一个div，不断往里面加字符，测宽度，然后和textarea的宽度作比较。如果正好能被容纳，那么那个div里的字符数就是我们要求的值。这个方法不光听起来就蠢，还不准确。请看下图。
图片描述

实际可用宽度是36.534，实际文字宽度是36.6477,所以是放不下的。但是clientWidth的精度只到整数，测下来是37，按这个结果看的话，那段文字是可以放得下的。[掀桌子]（为什么要用clientWidth？因为滚动条会占空间。）这就麻烦了。

然后就是要算每一个句子都占多少行。（在white-space: pre-wrap的情况下）这也很麻烦，这个换不换行是浏览器决定的，要精确地还原似乎也不大容易。对空格，减号的处理都有特殊情况。这个我也就做了一个大概。

三种情况需要更新textarea的可用宽度：

对于1，我们之前就处理过，好改。
对于2，听一下input事件，看textarea的clientHeight有没有变。滚动条是会占用clientHeight的。
对于3，textarea没有resize事件，又要手动弄了。查了一下是要听鼠标点击和松开事件。于是我做了下面的试验：

图片描述

相同的操作：在textarea上按下鼠标，移开到textarea之外放开。结果三个浏览器的结果全不一样！不过至少都能听到mousedown事件，总算有切入的地方。具体实现可以看代码，文字叙述不大容易。要注意的是mousemove也要听，否则这样：

图片描述

还有一个写代码时我遇到的问题是如果把textarea缩到很小，浏览器就卡住了。直觉是遇到无限循环了。果然，是因为一行内一个字符也容不下的时候，那么就需要无限行。加了一个特殊条件处理的if之后解决了。

这个firefox和edge还不一样（我只试了三个浏览器，外加chrome）。一个要用white-space: pre，一个要用white-space: nowrap。（chrome都可以）

当然，真正要做网页编辑器的话是不可能用textarea的，我的这个东西在有限的场景里可能是会有用的。想了解实际的编辑器可以看这个文章。

第一次发文章，不是教程，算是经验交流吧。欢迎大家讨论。

关注