The Artima Developer Community
Sponsored Link

Agile Buzz Forum
Building a rich text editor using HTML5 canvas

0 replies on 1 page.

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  Threaded View   
Previous Topic   Next Topic
Flat View: This topic has 0 replies on 1 page
James Robertson

Posts: 29924
Nickname: jarober61
Registered: Jun, 2003

David Buck, Smalltalker at large
Building a rich text editor using HTML5 canvas Posted: Jul 30, 2009 8:50 AM
Reply to this message Reply

This post originated from an RSS feed registered with Agile Buzz by James Robertson.
Original Post: Building a rich text editor using HTML5 canvas
Feed Title: Michael Lucas-Smith
Feed URL:
Feed Description: Smalltalk and my misinterpretations of life
Latest Agile Buzz Posts
Latest Agile Buzz Posts by James Robertson
Latest Posts From Michael Lucas-Smith


The Bespin project is very inspiring. As is Lively. Both of these projects use the HTML5 canvas tag which allows you to draw 2d graphics on a webpage using Javascript.

I thought it'd be an interesting experiment to try and make a rich code editor for WebVelocity using the same techniques. There are many hurdles along the way and last night a colleague (Jerry) and I discussed one of the harder ones: Cut/Copy/Paste.

Web browsers don't give you access to the clipboard from Javascript because of security concerns. To get around this, in IE you can use execCommand to send cut/copy/paste. As far as I know and from Jerry's research in to the issue, IE is the only browser silly enough to provide this kind of interface.

Silly or not, you can do something interesting in Mozilla too, with a ClipboardManager that asks the user if they want to allow the particular website access to their clipboard or not. Chrome strictly forbids access to the clipboard and I'm not sure what Safari does.

The short of it is this - the best way to access the clipboard is to embed a flash program that does just that, escapes the browser to give you access to the clipboard. This is, apparently, the state of the art technique... or so I thought.

As Jerry told me how bad it all was, my mind started to rebel saying "No no no, I don't want to do it that way."

It dawned on me, we can capture the cut/copy/paste key strokes easily enough - why not dynamically create a textarea and insert the text to be copied or retrieve the pasted text, on keydown then keyup, allowing the standard action to take place.

At first blush, it worked - but I found I could not hide the textarea and still trick Firefox in to letting me do this. I had to make it small and shuffle it off the edge of the page so that it is technically still visible. On keydown, I create the textarea and fill it with the selected text in my , then on keyup, I retrieve the text from the textarea. It's remarkably simple and it works perfectly.

I don't know why I haven't read of more people doing this. It works equally as well in Safari and Chrome, however it doesn't work if the user decides to do copy/paste from the menus. However, it's probably easy enough to have a persistent textarea hidden away that I keep in sync with actual edits. This would also be useful if someone wanted to use the editor as part of a form POST.

Read: Building a rich text editor using HTML5 canvas

Topic: Allergic to What? Previous Topic   Next Topic Topic: Handheld Geometry

Sponsored Links


Copyright © 1996-2019 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use