2012-09-14 73 views
6

我正在使用HTML5畫布文本編輯器中,我可以更新文字,改變字體,字體移動和移動的背景圖像。創建<canvas>基於HTML5文本編輯器

我需要關於帆布運動文本幫助 - 怎麼能使用鼠標移動情境事件 做?

+2

請不要濫用** **加粗格式。當你大膽的整個事情時,它只會讓你的問題難以閱讀。 – meagar

+0

查看Carota(earwicker.com/carota)。似乎基於畫布的文本編輯器是一個實現的夢想。我還沒有使用過它,但我計劃將它合併到我正在構建的站點中。它將文本保留爲具有格式屬性的JSON。簡單而完美。 – jeromeyers

回答

4

使用HTML5 <canvas>文本編輯不推薦的方法(見上文FOM jbalsas答案)。 Mozilla的貝斯平(Skywriter)是一種嘗試,直到它被關閉和發展轉移到非<canvas>基於ACE編輯:

https://mozillalabs.com/en-US/skywriter/

http://ace.ajax.org/

的Atom編輯選擇非帆布辦法,最終解決上React.js加快DOM更新過程:

http://blog.atom.io/2014/07/02/moving-atom-to-react.html

然而<canvas>基d剪輯是可能的,即使不推薦使用,請參閱下面的意見,並從jeromeyers評論:

http://earwicker.com/carota/

... also this blog post contains some ideas when DOM based text editing might not work

+10

我給了這個答案-1,因爲它不是真的。 Mozilla *確實做到了,其他任何人都可以這麼做。他們的畫布實施功能齊全,速度非常快。他們最終放棄了它,因爲他們發現基於DOM的實現對於他們特定的目標更加靈活*,但這並不意味着OP應該。他可能有不同的目標。如果我可以,我也願意給這個答案另一-1,試圖對人,他們不能做的事情,Mozilla的不能打動。這簡直荒謬。 – FtDRbwLXw6

+1

是的,讓我們打消對已嘗試在我們面前的任何人任何事任何工作。我相信這會帶給我們很棒的地方。 –

+0

如果你認爲可行,我建議你發佈一個答案。 缺少問題中建議的鼠標事件必需的API。此外,缺少精細調整的文本呈現,使其不適合格式化文本。此外,正如此問題中的其他答案所述,不推薦使用基於的文本控件。還有其他的選擇,那麼爲什麼你會把頭撞到牆上。 –

7

畫布本身建議不要這樣做了W3C草案。如果你需要一個文本編輯器,你可以在canvas best practices

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

[...] 

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. 

閱讀,你可以看看其他自由行動像CodeMirror

+0

謝謝你的'contenteditable',看起來正是我所需要的! – Nisk

+0

輸入元素和文本區域不能有任意格式,並且在移動平臺上contenteditable支持非常殘忍 – Michael

+0

當您閱讀w3c canvas for canvas的缺點時,它只會建議不要這樣做,因爲「重建所有功能需要很多工作」 。 w3c並不知道編碼器是如何工作的!那麼,你並不總是需要所有的功能,特別是對於一些簡單的需求。還有一些非常不錯的pure-js實現。 – huelbois