HTML JavaScriptリッチテキストボックス（IDE）

Question

私は、スタイルが入力したものに基づいてスタイルが自動的に変更されることを除いて、Gmailのように振る舞うJavaScriptでIDEを構築したいと考えています。これの論理は、私が苦労しているところではありません。 GmailがHTMLのリッチな編集形式で編集する機能を達成する方法。私が知っている限り、Textareaコントロールはこのように機能しないので、この機能をどのように偽造しますか？

Answer 1

「コンテンツエディタブル」のGoogleは、Firefox End HTMLページでF7を直接編集してみてください:) Gmailは、ContentEditable = "true"を使用してページ内にフレームを使用します。

Google Web Toolkitも参照してください：http://code.google.com/docreader/#p = google-web-toolkit-doc-1-5&s=google-toolkit-doc-1-5&t=devguidewidgetgalleryrichtextareaウィジェットがあります。

Answer 2

これがあなたの意味であるかどうかはよくわかりませんが、オンラインのwysiwygエディターをお探しですか？

その場合、私に勧めることを許可します ckeditor, 、非常に高速で、モダンで堅牢です。

対応するより広いリストを見つけることができます ウィキペディアエントリ.

おそらく、電子メールを編集できるように編集者をカスタマイズする必要があります（たとえば、事前に定義されたCSSクラスで作業することはできないため、エディターはすべてのスタイル定義を直接実行する必要があります。タグ）しかし、それは問題ではないはずです。

Answer 3

それを許可する多くのオープンソースシステムの1つをダウンロードし、それらがどのようにそれをしたかを確認してください。
基本的に、彼らはイベントハンドラーをボタンに取り付けており、現在、カーソルがテキストエリアにある場所、またはテキストエリアの選択した領域の周りにある場所に「スタッフ」を挿入する方法を知っています。

Answer 4

私の投票は 'editarea'これはWebベースのエディターのリストにあります： 別のウィキペディアエントリ.

最も単純なコードを備えた既存のページに追加することができました。

<script language="javascript" type="text/javascript" src="edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript" >
editAreaLoader.init({
  id: "my_textarea_id"   // ID of textarea to turn into syntax editor.
  , syntax: "php"
  , start_highlight: true
  , allow_resize: "both"
  , toolbar: "search, go_to_line, |, undo, redo, |, highlight, reset_highlight, word_wrap,|,syntax_selection"
  , min_height:150
  , min_width:400
});
</script>