how to make a simple editor that can write word using Raphaël

i want to make 开发者_C百科a new editor using Raphaël , and then add more ideas ,

so the first step , i want to achieve write word using Raphaël

what can i do ?

some one give me ideas

thanks

---

First off, I dont think creating an editor in Raphael is the best idea, standard html and javascript should be enough. Raphael creates shapes and uses SVG (Scalable Vector Graphics) and so that is why I think it's not the best idea. But anyway:

First of all you need to make yourself familiar with the Raphael documentation. Once you have done this you will find that it is actually quite simple to create what you want.

1: Create your html elements that the user will be interacting with.

<div id="preview" style="width:100%; height: 300px; border: 1px solid #000;"></div>
<textarea name="textBlock" cols="85" rows="10">Edit your text here</textarea>

2: Create your Raphael elements, we initially set the text as an empty string.

var paper = Raphael("preview", "100%", "100%");
var t = paper.text("50%", 30, "");

3: Attach an event to you element so that it will be updated.

$("textarea[name='textBlock']").bind("keyup", function() {
    t.attr({ text: $(this).val() });
});

And there you have it. Each time that a key on the keyboard is pressed the Raphael text will be updated (when the user lifts their finger off the key). As I mentioned previously this is not the best method for what you want if it is an editor as such like appears on stackoverflow. There are certain limitations such as text wrapping etc that require a lot more work to get right in this framework.

If you would like to view the source whole and play with it, there is a working version on jsFiddle here.