基于Web的文本编辑器中每个字符一个<span> </span>

Question

我正在开发一个没有任何contentEditable，textarea或input内容的基于网络的文字编辑器。我工作的最大部分是测量当前插入符号位置左侧（右侧）的文本宽度，并在文本中移动插入符号。

例如，当用户按下DOWN键时，必须计算插入符号的当前左偏移量，并且必须找到位置最相似的字符下面的行。

一个非常方便的方法是每个字符使用一个DOM元素 - 我可以查看offsetLeft属性。此外，定位插入符更容易。实际上，一切都比较容易。

然而我对性能影响非常不确定。我已经看到在某些基于Web的JavaScript“IDE”上使用的这种技术（或类似的），它在那里工作得很好。

你有任何提示，提示吗？

您是否知道如何测量文本宽度的其他快速方法？我想避免将一行的部分放到DOM元素上并每次测量它的宽度，因为我认为它会慢得多。

编辑：我主要询问许多dom元素存在的主要事实。如何进行测量是另一回事。

Answer 1

我已经看到这样做了（遗憾的是现在无法找到链接）通过使用canvas对象及其measureText（）方法 - 基本上你可以问画布“如果我渲染它，这段文字的大小是多少这种风格？“并用它来确定你周围线条的插入位置。这是高效的，但当然它只适用于支持HTML5的浏览器，也许不是全部。

但坦率地说，这听起来像是一个巨大的痛苦，可能比浏览器内编辑器更值得麻烦：）

Answer 2

您可能对this感兴趣，{{3}}是VI文本编辑器的javascript实现。不幸的是它确实使用了textarea，但不是典型的方式。