StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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 <a href="http://en.wikipedia.org/wiki/Scalable_Vector_Graphics" rel="nofollow">SVG (Scalable Vector Graphics)</a> and so that is why I think it's not the best idea. But anyway:</p> <p>First of all you need to make yourself familiar with the <a href="http://raphaeljs.com/reference.html" rel="nofollow">Raphael documentation</a>. Once you have done this you will find that it is actually quite simple to create what you want.</p> <p><strong>1: Create your html elements that the user will be interacting with.</strong></p> <pre><code><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> </code></pre> <p><strong>2: Create your Raphael elements, we initially set the text as an empty string.</strong></p> <pre><code>var paper = Raphael("preview", "100%", "100%"); var t = paper.text("50%", 30, ""); </code></pre> <p><strong>3: Attach an event to you element so that it will be updated.</strong></p> <pre><code>$("textarea[name='textBlock']").bind("keyup", function() { t.attr({ text: $(this).val() }); }); </code></pre> <p>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.</p> <p>If you would like to view the source whole and play with it, there is a working version on <a href="http://jsfiddle.net/Zz4v5/" rel="nofollow">jsFiddle here.</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload