入力した内容に基づいてスタイルが自動的に変更されることを除いて、gmail のように動作する IDE を JavaScript で構築したいと考えています。これのロジックは、私が苦労している場所ではありません。gmail が html のリッチ エディット フォーマットで編集する機能を実現する方法です。私が知る限り、テキストエリア コントロールはこのようには機能しません。
4 に答える
「編集可能なコンテンツ」の Google Firefox で F7 を押して、HTML ページを直接編集してみてください:) Gmail は contenteditable="true" のページ内で Frame を使用します。
Google Web Toolkit も参照してください: http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideWidgetGallery RichTextArea ウィジェットがあります.
これがあなたの言っていることかどうかはよくわかりませんが、オンラインのWYSIWYGエディターをお探しですか?
その場合、CKEDitorをお勧めします。これは非常に高速で、最新で、堅牢です。
より広範なリストは、対応するウィキペディアのエントリにあります。
電子メールを編集できるようにするには、おそらくエディターをカスタマイズする必要があります(たとえば、事前定義されたCSSクラスを操作することはできないため、エディターはすべてのスタイル定義を直接で行う必要があります。タグ)しかし、それは問題ではないはずです。
それを可能にする多くのオープンソースシステムの1つをダウンロードして、彼らがどのようにそれを行ったかを見てください.
基本的に、それらはボタンにイベント ハンドラーをアタッチしており、テキスト エリア内のカーソルが現在位置している場所、またはテキスト エリア内の選択されたエリアの周囲に「もの」を挿入する方法を認識しています。
私の投票は、Web ベースのエディターのリストにある「 editarea 」です:別のウィキペディア エントリ。
最も単純なコードを使用して、既存のページに追加することができました。
<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>