TinyEditorシンプルで使いやすいHTML wysiwygエディター

数日前、私はあなたに国内のXHTMLエディターを紹介しました。今日はTinyEditorをお勧めしたいと思います。これは、有名な外国のWebデザインブログであるLeigeber.comがリリースしたばかりのシンプルで使いやすいHTML WysiWygエディターです。

• JavaScriptで書かれており、他のライブラリに依存していません
• これは軽量のエディターであり、呼び出されるファイルはわずか8kbです
• ほとんどのHTMLフォーマット要件を処理でき、組み込み関数により生成されたタグが可能な限りシンプルになります
• エディターで使用される小さなアイコンはCSSスプライトテクノロジーを使用して、HTTP接続を削減します
• 主流のブラウザでのテストパス
• Creative Commonsライセンスに従って、個人または商業プロジェクトで使用できます

1. WebページファイルでTinyEditorが提供するJSおよびCSSファイルを参照してください
2. エディターが必要とするタグをWebページファイルに追加することは、実際には次のようにテキストアレアです

   <textarea id = input style = width：400px;高さ：200px> </textarea>

   Textareaで定義されている長さと幅は、エディターのサイズであることに注意してください。

3. スクリプトを介してエディターを初期化し、次のようにさまざまなパラメーターを構成します。

    new tiny.editor.edit（ 'editor'、{id： 'input'、//（must）the idwidth：584上記の2番目のステップで定義されているテキストエリア、// classrowclass:'teheader', // (optional) Editor button line classdividerclass:'tedivider', // (optional) Editor button style controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|', 'outdent', 'indent'、 '|'、 'leftalign'、 'centerign'、 'rightalign'、 'blockjustify'、 '|'、 'unformat'、 '|' | '|' '|'、 'redo'、n '、' font '、' size '、' style '|'、 'image'、 'copy' '|' '|' '|' 'nek' nek '' nek '、 //（必須）必要に応じてエディターにボタンコントロールを追加します。ここで、「|」は関数ボタン間の垂直分割線を表し、「n」はボタンラインフッターの間の分割線を表します。 XHTML：true、//（オプション）エディターはXHTMLまたはHTMLタグCSSFileを生成します： 'style.css'、//（オプション）エディターコンテンツに添付される外部CSSファイル： '開始コンテンツ'、//（オプション）エディター編集エリアで初期コンテンツを設定します{bowrence ed： 'cscolor：＃ccolor：＃ccolor：＃ccolor：＃ccolorエリアの背景BodyID： 'editor'、//（オプション）編集エリアidfooterclassを設定： 'tefooter'、//（optional）editor bottom classtoggle：{text： 'source code'、 'visualization'、cssclass： 'golgle'}、//（オプション）を設定します。 classResize：{cssclass： 'resize'} //（オプション）エディターサイズ調整ボタンクラスを設定}）;

   高度に構成可能であり、構成アイテムは比較的明確であると言えます。

TinyEditorの実際のアプリケーションでは、編集者コンテンツを送信する前に、eding.post（）関数を呼び出して、編集領域の最新の視覚コンテンツがタグテキストに変換されることを確認する必要があることに注意する必要があります。

例を見る： http：//sandbox.leigeber.com/tinyeeditor/