使用canvas元素作为textarea

使用canvas元素作为textarea

问题描述:

我正在寻找一个直接的描述如何使用canvas元素排序像一个文本区域。

I'm looking for a straight forward description of how to use a canvas element sort of like a text area.

我看到过 Ace 等项目。只是想知道如何去写区域,如果它在一个textarea。

I have seen projects such as Ace. Just wondering how to go about writing to the area as if it where a textarea. Just plain text, nothing fancy.

提前感谢。

Ace以前是Mozilla Skywriter,以前是Mozilla Bespin。

Ace used to be Mozilla Skywriter, which used to be Mozilla Bespin.

Bespin的代码其实很简单,如果你愿意挖掘它,你自己的基础上,但它是一种愚蠢的差事。

The code for Bespin is actually pretty simple to understand if you are willing to dig through it and make your own based on it, but it is sort of a fool's errand. The Canvas spec actually advises specifically against this:


作者应避免使用canvas
元素来实现文本
编辑控件。这样做具有大量的
缺点:

Authors should avoid implementing text editing controls using the canvas element. Doing so has a large number of disadvantages:

鼠标放置插入符号必须重新实现

Mouse placement of the caret has to be reimplemented.

键盘移动的插入符必须
重新实现(可能跨
行,对于多行文本输入)。

Keyboard movement of the caret has to be reimplemented (possibly across lines, for multiline text input).

文本字段的滚动必须实现
(对于长
行,横向,对于多行
输入垂直)。

Scrolling of the text field has to be implemented (horizontally for long lines, vertically for multiline input).

例如复制和粘贴
必须重新实现。

Native features such as copy-and-paste have to be reimplemented.

必须重新实现诸如拼写检查的本地功能

Native features such as spell-checking have to be reimplemented.

本地功能(例如拖放
)必须重新实现。

Native features such as drag-and-drop have to be reimplemented.

特定于用户的本地功能,
例如自定义文本服务,具有
重新实施。这接近
不可能,因为每个用户可能安装了
不同的服务,而
有一个无限的可能
这样的服务。

Native features specific to the user, for example custom text services, have to be reimplemented. This is close to impossible since each user might have different services installed, and there is an unbounded set of possible such services.

双向文本编辑必须重新实现

Bidirectional text editing has to be reimplemented.

对于多行文本编辑,行
换行必须为所有
相关语言。

For multiline text editing, line wrapping has to be implemented for all relevant languages.

文本选择必须重新实现

Text selection has to be reimplemented.

双向文本
选择必须重新实现。

Dragging of bidirectional text selections has to be reimplemented.

平台本地键盘快捷键
必须重新实现。

Platform-native keyboard shortcuts have to be reimplemented.

平台原生输入法编辑器
(IME)必须重新实现。

Platform-native input method editors (IMEs) have to be reimplemented.

撤销和重做功能必须为

Undo and redo functionality has to be reimplemented.

必须重新实现辅助功能,例如
放大,在插入符或
选择之后。
这是一个巨大的工作量,和
作者是最强烈鼓励
避免做任何它,而不是
使用input元素,textarea
元素,或contenteditable
属性。

Accessibility features such as magnification following the caret or selection have to be reimplemented. This is a huge amount of work, and authors are most strongly encouraged to avoid doing any of it by instead using the input element, the textarea element, or the contenteditable attribute.