2009-07-10 4 views
1

javascriptまたはjqueryで独自のリッチテキストエディタを作成したいと思います。私はどこから始めるべきかわからないので、できるだけ素人の骨が理想的です。シンプルなリッチテキストエディタの作成方法については、本当に基本的なチュートリアルはありますか?

編集:ホイールの再発明についてのコメントに応えるために、私が実装したい機能の1つがTinyMCEでも利用できないためです。 2]私は、サイトの多くの機能がエディタとやりとりする私のウェブサイトをアップグレードする考えがあります。私は、この目的のために別のスクリプトを修正するために、より多くの作業が必要になると思います。

+0

これは...と言って答えの多くになります「これを使用し、車輪の再発明をしないでください...」私は(あなただけの楽しみや学習目的のためにこれをプログラミングしていることを指定するに値する見つけますもしあなたが当然の場合は) –

+0

誰もが学習のために車輪を再発明しているわけではありません。個人的には、私は現在のWYSIWYGエディタが皆のためだとは思っていません。もし私が本当に必要なエディタを持っていれば、私自身は自分で作ろうと思っています。 –

答えて

0

よく組み込まれているテキストコントロールはプレーンテキストなので、自分で作成する必要があります。これは、フォーカスの処理、キーの押下のキャプチャ、およびキャレットの表示を意味します。私はそこから始めるだろう。

+1

contentEditable属性には、多くの要素を書式設定をサポートする「テキスト」ボックスに変換する機能があります。フォーカス、キー押下、キャレットを処理します。 –

0

Xhinaがどのように機能するかをご覧ください。それは素晴らしいオープンソースのWYSIWYGエディタです。それ以外の場合は、hereをご覧ください。

0

"シンプルなリッチテキストエディタの作成方法に関する実際のチュートリアルはありますか?"

現在利用可能な業界の取り組みがどれほどであるかを考えれば、 "単純なリッチテキストエディタ"であり、基本的なチュートリアルはそれほどありません。非常に難しい問題です。

+0

これは答えではなくコメントに適していると思いませんか?結局のところ、回答は役に立つはずです。 –

+0

質問は「何かありますか?」でした。私は答えがおそらく "いいえ"であることを示唆していた – dkretz

4

ブラウザの違いを超えてしまうと、対処するのが面倒になります。

ここでの編集では、テキストをインラインで編集していないことがわかります。別のディスプレイを持つ基本的なメモ帳のようなものを作ろうと思っているのであれば、それはカラットを見つけて、その周りの言葉と空白を調べることです。

清潔なWYSIWYGエディタをお探しの場合は、TinyMCEとopenWYSIWYGの両方でiFrameを挿入し、編集できるようにiFrameのプロパティを設定してページを操作します。ページが送信される前に、iFrameのコンテンツがHTMLを含む元のテキストボックスに挿入され、擬似リッチテキスト項目が送信されます。

MozillaにはFirefox用のスタートがあります。

Rich Text Editing in Mozilla

+1

IEのためにこれを試してみてください:http://msdn.microsoft.com/en-us/library/ms537837(VS.85).aspx – Boldewyn

+0

+1ここで最も役に立つ答え。コマンドキーのショートカット、太字、斜体などが本当に好きです。これらのコマンドは、execCommand( 'bold')を使って実行したり、queryCommandEnabled()を使って実行できるかどうかを確認したりできます。これらはツールバーの作成に役立ちます。 –

0

よくボタンの同じサイズの画像の行を作成し、単純に開始します。それらにすべてのクラスファイルを与えてから、JQueryにonclickを処理させてボタン名を取得させます。次に、ボタン名に基づいて、必要なアクションを実行します。基本的な枠組みはそれほど厳しくすべきではありません。

0

私は、YUIのリッチテキストエディタウィジェットがかなり小さいことを発見しました。おそらくあなたはそれを裂いて、彼らが何をしているのかを見ることができますか?

これ以外のものは、私が見た小さなものの1つで、あなたのウェブサイトにはおそらく実装できます。

http://developer.yahoo.com/yui/editor/

関連する問題