Text On Canvas

[bunnyali2013]

Hi, I have an IFrame. Good. And I have a Canvas as well. Good again!

 

The user can write on the IFrame as I set the design mode ON. I am using document.execcomand to do the stuff, just like a simple text editor. I do not have issues on this. Here are my questions:

 

1/ What I want is, how to make the text written in the IFrame, appears on the Canvas? I mean, when the user is typing in the IFrame, the text is appearing simultaneously on the Canvas. If the user changes the text color, font color, bold, italic or whatever, of course the text also changes on the Canvas simultaneously. How to do that?

 

2/ Can I make all the elements draggable and resizable in the Canvas? I mean the text or anything but NOT the canvas?

 

 

Help!

[Adam]

Hmm well at a guess, I would say given canvas and execCommand are two completely different things, you'll not be able to have the changes "automatically" reflected. You will need to write a common interface you can use to fire commands, that will in the background translate each command into instructions to the canvas and execCommand() calls.

[bunnyali2013]

Ok, I have an idea, I will use a DIV. I will set it to contenteditable = true. Then I will write my text in it using document.execcomand. After that, I will drag and drop the text written to place it on the Canvas.

 

I think its a good idea. I want to know now, how to drag and drop only the content in a DIV? Not the entire DIV but only the content like the text for instance. I know how how to make the drag and drop using JQuery UI, but not something in a container.