ので、最初の一歩を私はラファエルを使用して新しいエディタを作りたいラファエル

Question

を使用して単語を書き、その後、より多くのアイデアを追加することができますシンプルなエディタ、

を作る方法を、私はラファエル

を使用して書き込みワードを達成したいです

私は何ができますか？

いくつかのいずれかが私に

おかげ

Answer 1

まずオフにアイデアを与える、私はラファエルのエディタを作成することが最善のアイデア、標準的なHTMLであるとJavaScriptが十分であるべきだと思ういけません。 Raphaelは形状を作成してSVG (Scalable Vector Graphics)を使用するので、それが最良のアイデアではないと思うのです。しかし、とにかく：

まず、Raphael documentationに精通している必要があります。一度これを行うと、あなたが望むものを作成することは実際には非常に簡単であることがわかります。

1：ユーザーがインタラクションするHTML要素を作成します。

<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：あなたのラファエル・エレメントを作成し、我々は最初は空の文字列としてテキストを設定します。

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

3：それが更新されるように、あなたの要素にイベントをアタッチします。

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

これがあります。キーボード上のキーが押されるたびにRaphaelテキストが更新されます（ユーザーがキーから指を離したとき）。前に述べたように、これはエディタであれば、stackoverflowのように表示されるので、これがあなたが望むものにとって最良の方法ではありません。この枠組みの中で正しいことを得るためにもっと多くの作業が必要なテキストラッピングなどの特定の制限があります。

ソース全体を表示して再生したい場合は、jsFiddle here.

に作業バージョンがあります