TinyEditorは、シンプルで使いやすいhtml WYSIWYGエディタです。

先日、紹介したのは 中国発のxhtmlエディタ 今日オススメしたいTinyEditorは、海外の有名なWebデザインブログである ライジバードットコム クリーンで使いやすいhtml用WYSIWYGエディタをリリースしたばかりです。

TinyEditorには以下のような特徴があります。

• Javascriptで記述されており、他のライブラリに依存しません。
• 呼び出すファイルは8kbと軽量なエディタです
• ほとんどの html フォーマットのニーズに対応でき、生成されたマークアップをできるだけ簡潔にするための機能が組み込まれています。
• エディターで使用される小さなアイコンは、CSS Spriteの技術を使用し、http接続を軽減しています
• 主要なブラウザでテスト済み
• 個人的なプロジェクトでも商業的なプロジェクトでも、次のように使用することができます。 クリエイティブ・コモンズ・ライセンス

使い方をご紹介します。

1. ページファイル内でTinyEditorが提供するjsファイル、cssファイルを参照する。
2. エディターが必要とするタグを、実際にはテキストエリアであるウェブページファイルに以下のように追加します。

   
   <
   
   
   テキストエリア
   
   
   
   イド
   
   
   
   =
   
   
   
   入力"
   
   
   
   スタイル
   
   
   
   =
   
   
   
   "幅:400px; 高さ:200px"。
   
   
   ><
   
   
   /
   
   
   
   テキストエリア
   
   
   >
   
   
   

   なお、textareaで定義された長さと幅は、エディタのサイズにもなっています。

3. スクリプトでエディタを初期化し、以下のように各種パラメータを設定します。

   
   新規
   
   
     if cv2.waitKey(100/12) & 0xff == ord("q"): 
   TypeError: integer argument expected, got float
   
   
   エディタ
   
   
   .
   
   
   編集
   
   
   <スパン
   
   (
   
   
   
   'エディタ'
   
   
   
   ,
   
   
   
   {
   
   
   
   	id
   
   <スパン
   
   :
   
   
   
   '入力'
   
   
   
   ,
   
   
   
   // (必須) 上記手順2で定義したtextareaのidを指定します。
   
   
   
   	width
   
   
   :
   
   
   <スパン
   
   584
   
   
   <スパン
   
   ,
   
   
   
   // （オプション）エディタの幅
   
   
   
   	height
   
   
   :
   
   
   <スパン
   
   175
   
   
   <スパン
   
   ,
   
   
   
   // （オプション）エディタの高さ
   
   
   
   	cssclass
   
   
   :
   
   
   <スパン
   
   'テ'
   
   
   
   ,
   
   
   
   // (オプション) css でスタイルを制御するためのエディタクラス
   
   
   
   	controlclass
   
   
   :
   
   
   <スパン
   
   'tecontrol'
   
   
   
   ,
   
   
   
   // (オプション) エディター上のボタンのクラス
   
   
   
   	rowclass
   
   
   :
   
   
   
   'teheader'
   
   
   
   ,
   
   
   
   // (オプション) エディターボタン行のクラス
   
   
   
   	dividerclass
   
   
   :
   
   
   <スパン
   
   'テディビダー'
   
   
   <スパン
   
   ,
   
   
   
   // (オプション) エディターボタン間の分割線のスタイル
   
   
   
   	controls
   
   
   :
   
   
   <スパン
   
   [
   
   
   <スパン
   
   '太字'
   
   
   
   ,
   
   
   <スパン
   
   'イタリック'
   
   
   
   ,
   
   
   
   'アンダーライン'
   
   
   
   ,
   
   
   
   'ストライクスルー'
   
   
   
   ,
   
   
   <スパン
   
   '|'
   
   
   
   ,
   
   
   
   'subscript'（サブスクリプト
   
   
   
   ,
   
   
   
   '上付き文字'
   
   
   
   ,
   
   
   
   '|'
   
   
   
   ,
   
   
   
   'オーダーリスト'
   
   
   
   ,
   
   
   <スパン
   
   'unorderedlist'
   
   
   
   ,
   
   
   
   '|'
   
   
   
   ,
   
   
   
   'アウトデント'
   
   
   
   ,
   
   
   
   'インデント'
   
   
   
   ,
   
   
   
   '|'
   
   
   
   ,
   
   
   
   '左寄せ'
   
   
   
   ,
   
   
   
   'センターアライン'
   
   
   
   ,
   
   
   
   '右寄せ'
   
   
   
   ,
   
   
   
   'ブロックジャスティファイ'
   
   
   
   ,
   
   
   
   '|'
   
   
   
   ,
   
   
   
   'アンフォーマット'
   
   
   
   ,
   
   
   
   '|'
   
   
   
   ,
   
   
   
   'アンドゥ'
   
   
   
   ,
   
   
   <スパン
   
   'やり直し'
   
   
   
   ,
   
   
   <スパン
   
   'n'
   
   
   
   ,
   
   
   <スパン
   
   'フォント'
   
   
   
   ,
   
   
   <スパン
   
   
   'サイズ'
   
   
   
   ,
   
   
   
   'スタイル'
   
   
   
   ,
   
   
   
   '|'
   
   
   
   ,
   
   
   
   'イメージ'
   
   
   
   ,
   
   
   
   'hr'
   
   
   
   ,
   
   
   
   'リンク'
   
   
   
   ,
   
   
   
   'アンリンク'
   
   
   
   ,
   
   
   
   '|'
   
   
   
   ,
   
   
   <スパン
   
   'カット'
   
   
   
   ,
   
   
   <スパン
   
   'コピー'
   
   
   
   ,
   
   
   <スパン
   
   'ペースト'
   
   
   
   ,
   
   
   <スパン
   
   'プリント'
   
   
   
   ]
   
   
   
   ,
   
   
   
   // （必須）必要に応じてボタンコントロールをエディタに追加します。'|' は機能ボタン間の垂直方向の区切り、'n' はボタンライン間の区切りです。
   
   
   
   	footer
   
   <スパン
   
   :
   
   
   <スパン
   
   真
   
   
   
   ,
   
   
   
   // （オプション）エディタの下部を表示するかどうか
   
   
   
   	fonts
   
   
   :
   
   
   <スパン
   
   [
   
   
   <スパン
   
   'バーダナ'
   
   
   
   ,
   
   
   
   'Arial'（アリアル
   
   
   
   ,
   
   
   
   'ジョージア'
   
   
   
   ,
   
   
   
   'Trebuchet MS'
   
   
   
   ]
   
   
   <スパン
   
   ,
   
   
   
   // （オプション）エディターで使用できるフォント
   
   
   
   	xhtml
   
   
   :
   
   
   <スパン
   
   真
   
   
   
   ,
   
   
   
   // (オプション) エディターが xhtml と html のどちらのマークアップを生成するか
   
   
   
   	cssfile
   
   
   :
   
   
   
   'style.css'
   
   
   
   ,
   
   
   
   // （オプション）エディタに添付する外部cssファイル
   
   
   
   	content
   
   
   :
   
   
   
   'スタートコンテンツ'
   
   
   
   ,
   
   
   
   // （オプション）エディタ編集エリアの初期コンテンツを設定します。
   
   
   
   	css
   
   
   :
   
   
   
   'body{background-color:#ccc}'です。
   
   
   
   ,
   
   
   
   // （オプション）エディター編集エリアの背景を設定する
   
   
   
   	bodyid
   
   
   :
   
   
   <スパン
   
   'エディター'
   
   
   
   ,
   
   
   
   // （オプション）編集領域IDの設定
   
   
   
   	footerclass
   
   <スパン
   
   :
   
   
   <スパン
   
   'テーフッター'
   
   
   
   ,
   
   
   
   // （オプション）エディターボトムクラスの設定
   
   
   
   	toggle
   
   
   :
   
   
   <スパン
   
   {
   
   
   text
   
   <スパン
   
   :
   
   
   
   'ソースコード'
   
   
   
   ,
   
   
   activetext
   
   
   :
   
   
   <スパン
   
   '可視化'
   
   
   
   ,
   
   
   cssclass
   
   
   :
   
   
   <スパン
   
   'トグル'
   
   
   
   }
   
   
   
   ,
   
   
   
   // （オプション）ソースコードのブラウズ・トグル・テキスト、およびトグル・ボタンのクラスを設定します。
   
   
   
   	resize
   
   
   :
   
   
   <スパン
   
   {
   
   
   cssclass
   
   <スパン
   
   :
   
   
   <スパン
   
   'リサイズ'
   
   
   
   }
   
   
   
   // （オプション）エディタのリサイズボタンのクラスを設定します。
   
   
   
   }
   
   
   
   )
   
   
   
   ;
   
   
   

   設定性が高く、設定項目が明確である。

TinyEditor を使った実践では、編集エリアの最新のビジュアルコンテンツがマークアップテキストに変換されるように、エディタコンテンツを送信する前に instance.post() 関数を呼び出す必要があることに注意することが重要です。

例をご覧ください。 <フォント http://sandbox.leigeber.com/tinyeditor/
ダウンロードしてください。 TinyEditorのソースコードとサンプルファイル