假設我想創建一個簡單的文本編輯器。它並不需要特別特別，它大部分應該像記事本一樣。並且，我想從頭開始創建它：爲了方便，我們假設我擁有像Canvas這樣的工具（我的意思是在瀏覽器中工作的工具）。對於那些對畫布不熟悉的人，可以快速瀏覽一下what it can do with text。如何從頭創建一個非常簡單的文本編輯器？
但技術並不重要：關鍵是，我可以在屏幕上的某個座標處放置一些文本，設置顏色和字體，並將其左中右對齊框內，這基本上是我所能做到的用可用的工具。這些工具不知道如何自動換行或選擇文本，並且一旦將文本放在屏幕上，它就會變成一堆像素 - 無法更新文本或輕鬆刪除最後一個字符，因爲例。
現在，不像你們大多數聰明人在這裏，我從來沒有創建過一個文本編輯器。 我的問題是：
這是在Canvas中試圖做的一種皺眉。 HTML5 Canvas規範本身強烈建議不要試圖做到這一點。正如規範所說：
作者應該避免使用canvas元素實現文本編輯控件。這樣做有很多缺點：
- 鼠標放置的脫字符必須重新實現。
- 插入符號的鍵盤移動必須重新實現（可能跨行，用於多行文本輸入）。
- 必須執行文本字段的滾動（水平方向爲長行，垂直方向爲多行輸入）。
- 必須重新實現複製和粘貼等本機功能。
- 必須重新實現拼寫檢查等本機功能。
- 必須重新實現拖放等本機功能。
- 必須重新實現頁面範圍文本搜索等原生特性。
- 必須重新實現特定於用戶的本地功能，例如自定義文本服務。這幾乎是不可能的，因爲每個用戶可能安裝了不同的服務，並且存在無限可能的這種服務。
- 必須重新實現雙向文本編輯。
- 對於多行文本編輯，必須爲所有相關語言實現換行。
- 文本選擇必須重新實現。
- 拖動雙向文本選擇必須重新實現。
- 必須重新實現平臺本機鍵盤快捷鍵。
- 必須重新實現平臺本機輸入法編輯器（IME）。
- 撤消和重做功能必須重新實現。
- 輔助功能，如插入後的放大倍數或選擇必須重新實現。
實現這些各種各樣的在畫布的事情是噩夢，特別是今天，在相同的字體看起來不一樣，不僅每個瀏覽器，但看起來畫布渲染字體和瀏覽器中呈現的字體不同。
我建議你看看在畫布上製作的Mozilla Bespin的代碼。它最終成爲Mozilla Skywriter，然後最終他們說「Welp canvas是這個工作的錯誤工具」，放棄了，並與Ace合併，而不是使用Canvas，而是使用DIV。如果您真的對這類事情感興趣，那麼我強烈建議您查看這些項目的代碼。當我剛剛開始使用Canvas時，bespin代碼給了我很多幫助。
底線是，如果您正在進行文本編輯，請在畫布上使用DIV和輸入以及其他HTML元素（暫時）。不要試圖在畫布上模仿它。無論如何，你可以嘗試，但你會有一個糟糕的時間，你的用戶也是。
就畫布上的多行文本而言，現在您必須自己計算一切。你甚至必須接近文字高度。
我的實際執行一個簡單的編輯器的建議是這樣的：有一個畫布，有一定的文字畫，或許對一些複雜的圖形。當你想編輯文本時，可能通過點擊圖形，在click事件中出現（多行或不行）HTML輸入元素。按下輸入或退出鍵或丟失焦點的框（blur事件），提交更改。
感謝您的回答。其實我只是在看貝斯平，但我不知道他們後來放棄了帆布。 – snitko 2012-07-11 03:46:20
這個鏈接可能是有用的：https：//developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla – 2012-07-10 05:27:57
我想我的問題更多的是理論方面。我並不需要富文本編輯。我只需要文本編輯。 – snitko 2012-07-10 05:32:33
關於技術我認爲你可以使用像WinAPI這樣的RichEdit控件。您可以增量添加文本，修改它（刪除，更改功能）只修改選中的文本，複製到剪貼板，添加字體，顏色，甚至URL等等。實現起來並不難，比如簡單的編輯器。 – 2012-07-10 05:36:51