jQuery エディタ プラグイン tinyMCE の使い方

簡略化されたファイル サイズを変更し、サンプルをダウンロードします。ファイルをローカル コンピューターにダウンロードします。また、公式 Web サイトから最新の jQuery ベースのコードをダウンロードすることもできます: https://www.jb51.net/codes/44180.html

1 html

<textarea id="txtcontent" runat="server" name="elm1" rows="15" cols="80" style="width:80%"></textarea>

2 js リファレンス

まずtiny_mce.jsとjquery-1.4.2.min.jsを参照します

tinyMCE を呼び出す:

パラメータの詳細:

モード: テキストエリアまたは正確
elements: exact in mode で使用され、その値は HTML で使用されるテキストエリアの ID または名前です。
テーマ: 使用されるスタイル
スキン: 対応するスキンディレクトリでスタイルを見つけます
skin_variant: スキンディレクトリで選択された CSS ファイル。例: skin_variant: "black" は、skins\o2k7\ui_black.css を意味します。
プラグイン: プラグインフォルダ内のプラグインを選択して使用します
theme_advanced_buttons1: 機能ボタンの最初の行が表示されます。theme_advanced_buttons2 も同様です。
3. js を通じて入力ボックスに画像を追加し、表示します。js コードは次のとおりです。
tinyMCE.execCommand('mceInsertContent',false,"<p><img src=\"../images/house.jpg\" alt=\"\" width=\"588\" height=\"419\" /></p>");
入力ボックスの内容を js 経由で取得します。コードは次のとおりです。
tinyMCE.getInstanceById('txtcontent').getBody().innerHTML