一個<span>每個字符在基於Web的文本編輯器

我正在開發基於Web的文本編輯器，沒有任何contentEditable，textarea或input的事情。我的工作的最大部分是從當前位置測量左側（右側）的文本寬度，並在文本中移動插入符號。一個<span>每個字符在基於Web的文本編輯器

例如，當用戶PRESSE DOWN鍵的電流左偏移插入符必須被計算並在該字符的位置的下方的線是最相似的，必須找到。

一個非常方便的方式是每個字符使用一個DOM元素 - 我可以看看offsetLeft財產。另外，定位插入符號要容易得多。其實，一切都更容易。

然而我對性能影響非常不確定。我在某些基於Web的JavaScript「IDE」上看到了這種技術（或類似技術），它在那裏工作得很好。

你有什麼提示，提示？

你知道一些其他的快速方法如何測量文本的寬度。我想避免將一行的部分放到一個DOM元素中，並且每次都測量它的寬度，因爲我認爲它會慢得多。

編輯：我主要問的許多DOM元素主要存在的事實。如何做測量是另一回事。

2011-02-23 tillda

您可能感興趣的this，這是一個JavaScript實現的VI文本編輯器。不幸的是，它確實使用了textarea，但並不是典型的方式。

2011-02-23 15:27:57 VoronoiPotato

雖然這是有趣的，所描述的問題並沒有真正存在jsvi，僅僅是因爲它使用等寬字體。在上下移動時，您不需要計算插入符號的x位置，因爲它不會改變。 – glomad 2011-02-23 15:32:07

我主要是問許多dom元素存在的主要事實。如何做測量是另一回事。 – tillda 2011-02-23 15:48:43

我已經看到這種情況，通過使用畫布對象及其measureText（（可惜現在找不到鏈接））方法 - 基本上你可以問一個畫布「將這塊文字是什麼尺寸，如果我呈現它在這種風格？「並用它來確定你在周圍線上的插入位置。這是高性能的，但它當然只能在支持HTML5的瀏覽器中工作，可能不是全部。

但坦率地說，這聽起來像是在脖子上一個很大的痛苦，可能更多的麻煩比它的價值一個在瀏覽器中編輯:)

2011-02-23 15:43:51 glomad

但是它的聲音比measureDiv.clientWidth少得多。謝謝。 – tillda 2011-02-23 15:51:58

回答