|
tinyMCE の使用方法の詳細な説明
初期化
TinyMCE を初期化するときは、ページの HEAD タグに次のコードを追加する必要があります。次の例の設定によれば、ページが読み込まれると、すべての TEXTAREA テキスト フィールドがエディターに変換されます。他にもモジュールはありますが、後ほど詳しく説明します。
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
モード: "テキストエリア"
});
</スクリプト>
<!-- /tinyMCE -->
上記の赤い部分は tiny_mce.js スクリプト ファイルの場所であり、エディターに必要なすべてのコードが含まれていることに注意してください。テーマと言語パックは初期化中に読み込まれます。
青い部分は初期化呼び出しで、TinyMCE のグローバル インスタンスを作成します。設定と名前と値のプロパティについては後で説明します。 設定 tinyMCE の init メソッドに名前と値の属性として渡される設定は、アプリケーションのグローバルな動作を制御します。すべてのキーと可能なキー値を次の表に示します。角括弧 [] で囲まれた名前はオプションであり、必須の設定ではないことに注意してください。
| 一般設定 | | モード | モードは次のいずれかの値になります。
textareas - ページの読み込み時にすべての TEXTAREA コンポーネントをエディターに変換します。
specific_textareas - 「mce_editable」属性が true に設定されているすべての TEXTAREA をエディターに変換します。
exact - 「要素」設定で指定された正確なコンポーネントのみを変換します。 | | [テーマ] | 使用するテーマの名前を指定します。テーマは TinyMCE のテーマ ディレクトリに配置されます。デフォルトは default です。 TinyMCE には、シンプル、デフォルト、高度な 3 つの組み込みテーマが付属しています。
独自のテーマを作成する場合は、ドキュメントのテーマのセクションをよくお読みください。 | | [プラグイン] | このオプションは、テーマ プラグインのコンマ区切りリストです (例: 画像ダイアログのみを拡張する)。これらのプラグインは、テーマ テンプレートで定義された機能をオーバーライドします。プラグインのロジックは、「editor_plugin.js」というファイルに含まれている必要があります。これは、プラグイン ディレクトリに含まれる唯一のファイルです。
たとえば、「my_image_dialog、my_link_dialog」などです。
独自のプラグインを作成する場合は、ドキュメントのテーマのセクションをよくお読みください。 | | [言語] | TinyMCE で使用される言語パック。これは、se、uk、us などの FN コードである必要があります。これは、「langs」ディレクトリから言語パックを取得するために使用されます。この設定のデフォルト値は「uk」です。
中国語ユーザーの場合は「zh-CN」を使用することをお勧めします。 | | [要素] | エディターに変換するコンポーネントのコンマ区切りリスト。このオプションは、「mode」オプションが「exact」に設定されている場合にのみ使用されます。リスト内の要素は、id または name 属性を持つ任意の HTML コンポーネントにすることができます。 | | [聞く] | 「mode」が「textareas」または「specific_textareas」に設定されている場合、このオプションが使用され、入力ボックスをエディターに変換するかどうかをユーザーに尋ねます。
このオプションを使用する場合は、true に設定してください。 | | [テキストエリアトリガー] | テキストエリア トリガーのプロパティ。デフォルト値は "mce_editable" です。
このオプションは、「mode」が「specific_textareas」に設定されている場合にのみ使用されます。 | | [有効な要素] | コンポーネント変換パーツのカンマ区切りリスト。
たとえば、a[href|target=_blank],strong/b,div[align],br などです。
上記の例では、TinyMCE に、「a、strong、div」および「br」以外のすべてのコンポーネントを削除し、要素 b を strong に変換し、デフォルトのターゲットを「_blank」に設定し、href、target、および align 属性を保持するように指示しています。コンポーネント名と属性名を一致させるときに、*、+、? などのワイルドカードを使用できます。
キャラクター：
| 、 | コンポーネント定義間の区切り文字。 | | / | 2 つの同義コンポーネント間の区切り文字。最初のコンポーネントは出力に使用されるコンポーネントです (つまり、2 番目のコンポーネントは最初のコンポーネントに置き換えられます)。 | | | | 属性定義間の区切り文字。 | | [ | コンポーネントのプロパティ リストの開始シンボルを定義します。 | | ] | コンポーネントのプロパティ リストの終わりを定義します。 | | = | プロパティのデフォルト値を特定の値に設定します。例: "target=_blank" | | : | プロパティの値を特定の値に強制します。例: "border:0" | | < | 属性の値を確認します。たとえば、「target<_blank?_self」 | | ? | 属性チェック値間の区切り文字。上記を参照してください。 |
特殊変数:
{$uid} - 一意の ID 番号を生成します。 たとえば、「p[id:{$uid}]」です。
このオプションのデフォルト値は次のパターンです。
「a[href|target]、strong/b[class]、em/i[class]、strike[class]、u[class]、p[class|align]、ol、ul、li、br、
img[class|src|border=0|alt|hspace|vspace|width|height|align],sub,sup,blockquote[dir|style],
table[border=0|セル間隔|セルパディング|幅|高さ|クラス|配置],tr[行範囲],
td[列範囲|行範囲|幅|高さ],div[クラス|配置],span[クラス|配置],pre[クラス|配置],
アドレス[クラス|整列]、h1[クラス|整列]、h2[クラス|整列]、h3[クラス|整列]、
h4[class|align]、h5[class|align]、h6[class|align]、hr"。
すべてのコンポーネントと属性を含めるには、*[*] を使用します。これは、invalid_elements オプションを使用する場合に特に便利です。 | | [拡張された有効な要素] | 有効なコンポーネントを「valid_elements」リストの末尾に追加します。このオプションは、一部のコンポーネントのみをデフォルト リストに追加する場合に便利です。
形式は「valid_elements」と同じです。 | | [無効な要素] | 出力から除外するコンポーネント名のカンマ区切りリスト。 | | トリムスパン要素 | 真偽オプション。 true に設定すると、不要なコンポーネントが削除されます。デフォルト値は true です。 | | [CSSクラスを検証] | 真偽オプション。 true に設定すると、CSS クラス属性が検証されます。デフォルト値は true です。 | | [検証_html] | 真偽オプション。 HTML コンテンツを検証する必要があるかどうかを示します。デフォルト値は true です。 | | [urlコンバーターコールバック] | サニタイザーが URL を処理するときに呼び出される関数の名前。この関数は、func(url, node, on_save) という形式に従い、変換された URL を返す必要があります。この設定は統合目的のみに使用されます。パラメータ url は変換するアドレスを表し、node は URL を含むノードを表し、on_save はブール値 (ユーザーがフォームを送信すると true) です。 | | [フォーマット済み] | 真偽オプション。 true に設定すると、エディターはタブをインデントに変換しますが、HTML タグの PRE の効果と同様に、他の空白文字は保持します。デフォルト値は false です。 | | [挿入リンクコールバック] | 「insertlink」コマンドが実行されたときに呼び出される関数の名前。この関数は、選択されたリンクのアドレスとターゲットを取得し、コレクション名として「href」、「target」、「title」を含む配列を返します。新しいウィンドウを使用する場合、Mozilla との互換性のために、window.opener で tinyMCE.insertLink が呼び出されます。 | | [画像コールバックを挿入] | 「insertimage」コマンドが実行されたときに呼び出される関数の名前。この関数は、選択された画像の URL を取得し、コレクション名として src と alt を含む配列を返します。新しいウィンドウを使用する場合、Mozilla との互換性のために、window.opener で tinyMCE.insertImage が呼び出されます。
関数の形式: insertimage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout, action)。 | | [セットアップコンテンツコールバック] | エディターが初期化されるときに呼び出される関数の名前。関数の形式: setupContentCallback(editor_id, node)。ここで、editor_id はエディターの ID、node はエディターが配置されているボディ コンポーネント ノードです。 | | [保存コールバック] | triggerSave コマンドが呼び出されたときに呼び出される関数の名前。関数の形式: save(id, content, node)。特定の戻り値がある場合、その値は HTML フォーム コンポーネントに追加されます。したがって、この関数を使用して、ユーザー変換ロジックをカスタマイズできます。 | | [ドキュメントの言語] | TinyMCE ドキュメントで使用される言語。これは、se、uk、us などの FN コードである必要があります。これは、"<theme>/docs/<lang>" ディレクトリからドキュメントを取得するために使用されます。 このオプションのデフォルト値は、言語オプションと同じです。 | | [幅] | エディターの幅。デフォルトの幅は、元々置き換えられたコンポーネントの幅です。 | | [身長] | エディターの高さ。デフォルトの高さは、元々置き換えられたコンポーネントの高さです。 | | [コンテンツcss] | 編集ウィンドウで使用する CSS ファイル。そのパスはページを基準にする必要があります。 | | [ポップアップcss] | リンクや画像を挿入するときにポップアップ ウィンドウで使用される CSS ファイルには、ページに対する相対パスが必要です。 | | [エディターcss] | エディターによって使用される CSS ファイル。そのパスはページに対する相対パスである必要があります。 | | [エンコーディング] | エディターの出力エンコーディング。このオプションは現在、「html」または空のみにすることができます。 「html」に設定すると、エディターの出力は HTML でエンコードされます。
たとえば、< は < になります。デフォルト値は空です。 | | [デバッグ] | 真偽オプション。 true に設定すると、CSS ファイル パスなどのデバッグ情報が表示されます。 | | [ビジュアル] | 真偽オプション。 true に設定すると、境界線が 0 に設定されている場合に、視覚効果を高めるためにエディターでテーブルに点線が表示されます。
デフォルト値は true です。 | | [ビジュアルテーブルスタイル] | ユーザーは表のスタイルをカスタマイズできます。デフォルト値は、「border: 1px dashed #BBBBBB」です。 | | [フォーム送信トリガーを追加] | 真偽オプション。 true に設定すると、すべてのフォームの「onsubmit」イベント処理が強制的に実行され、保存がトリガーされます。このオプションのデフォルト値は true です。 | | [アンロードトリガーの追加] | 真偽オプション。 true に設定すると、「onunload」イベントが発生したときに現在のウィンドウに対して triggerSave 呼び出しが行われます。この triggerSave 呼び出しは、進む/戻るボタンを処理することを目的としているため、クリーンアップは実行されません。このオプションのデフォルト値は true です。 | | [force_br_newlines] | 真偽オプション。このオプションは、エディターに段落文字 (P) を改行 (BR) に置き換えるように強制します。このオプションのデフォルト値は false です。 （実験段階） | | [強制p改行] | 真偽オプション。このオプションをオンにすると、Mozilla/Firefox ブラウザは Enter キーを押すと段落文字 (P) を生成し、Shift + Enter キーを押すと改行 (BR) を生成します。このオプションのデフォルトは true です。 | | [相対URL] | 真偽オプション。 true に設定すると、絶対パスが相対パスに変換されます。デフォルト値は true です。 | | [スクリプトホストを削除] | 真偽オプション。 true に設定すると、URL 内のホスト名とポート番号がエディターの現在の場所と一致する場合に削除されます。
たとえば、エディターが http://www.somesite.com にある場合、次のリンク http://www.somesite.com/somedir/somepage.html は /somedir/somepage.html に変換されます。
relative_urls が false に設定されている場合、このオプションはデフォルトで true になります。 | | [フォーカスアラート] | 真偽オプション。 true に設定すると、エディターがフォーカスを失ったときに煩わしい警告ボックスが表示されます。デフォルト値は true です。 | | [ドキュメントベースURL] | 絶対パスを相対パスに変換するときに、ドキュメントの URL が使用されます。このオプションは、エディターの現在のデフォルト ドキュメントを指定します。
注: このオプションでドメイン名を指定する場合は、プロトコル プレフィックスを追加し、最後にスラッシュを付けます。例: http://www.somehost.com/mydir/ | | [カスタム元に戻すやり直し] | 真偽オプション。このオプションにより、元に戻す/やり直し機能がより充実します。デフォルト値は true です。 | | [カスタム元に戻す/やり直しレベル] | 元に戻す操作の最大数をカスタマイズします。デフォルトは無制限です。 | | [カスタム_元に戻す_やり直し_キーボード_ショートカット] | 使用すると、エディターは Ctrl+Z および Ctrl+Y のショートカットを使用して元に戻すおよびやり直しを実装できます。デフォルトで許可されます。 | | [コンテンツの重複を修正] | 真偽オプション。このオプションは、MSIE のコンテンツ重複バグを修正します。デフォルトでは有効になっていますが、互換性のために無効 (false) にすることもできます。 | | [方向性] | このオプションでは、アラビア語などの言語のテキストの方向を設定できます。可能な値は、ltr、rtl です。デフォルト値: ltr (左から右)。 | | [自動クリーンアップワード] | 有効にすると、MS Office/Word から貼り付けられた HTML は自動的にサニタイズされます。このオプションのデフォルト値は false です。
注意: この操作は現在 MSIE でのみサポートされています。 | | [起動時のクリーンアップ] | 有効にすると、エディターが初期化されるときにテキスト フィールドとコンポーネントがクリーンアップされます。デフォルト値は false です。 | | [インラインスタイル] | 有効にすると、width、height、vspace、hspace、align などのプロパティがスタイル属性に置き換えられます。デフォルト値は false です。
このオプションを使用する場合は、スタイル プロパティを正しいコンポーネントに適用することを忘れないでください。 | | [改行を改行に変換] | 有効にすると、エディターの起動時にすべての \n (改行) が <br /> コンポーネントに変換されます。このオプションのデフォルト値は false です。 | | [デザインモードの自動リセット] | TinyMCE エディターを表示/非表示にするために style.display の none/block メソッドを呼び出すときにバグが発生するため、デザイン モードをリセットする必要があります。このオプションを有効にすると、エディターにフォーカスが当てられたときに自動的にリセットされます。デフォルト値は false です。 | | [エンティティ] | 名前を検索するための文字コードのテーブル。要素は、エンティティのコンマ区切りのリストです。リストは奇数項目と偶数項目に分かれており、奇数項目は変換に使用する文字コード、偶数項目はその文字コードを表すエンティティ名です。たとえば、「8205,zwj,8206,lrm,8207,rlm,173,shy」などです。 | | [クリーンアップコールバック] | カスタムクリーンアップ機能。このオプションを使用すると、ユーザーはデフォルトのクリーンアップを拡張できます。この関数呼び出しはデフォルトの関数呼び出しとは別であり、デフォルトのクリーンアップ関数を置き換えるのではなく、単に拡張するだけです。詳細については、 「プラグインのクリーンアップ」をクリックしてください。 | | テーマ固有の高度な設定 | | [テーマの高度なツールバーの場所] | このオプションは、ツールバーのデフォルトの位置を変更するために使用されます。可能な値は、「top」と「bottom」です。デフォルト値は「bottom」です。 | | [テーマ_advanced_toolbar_align] | このオプションは、ツールバーの配置を左、中央、または右に設定するために使用されます。デフォルト値は中央です。 | | [テーマの高度なスタイル] | このオプションを使用すると、スタイル ドロップダウンに CSS クラスと名前を追加できます。形式は次のとおりです: "<title>=<class>;.."。
このオプションを指定しない場合は、メインコンテンツ セクションの CSS クラスが自動的にインポートされます。
たとえば、「ヘッダー 1 = header1;ヘッダー 2 = header2;ヘッダー 3 = header3」 | | [テーマの詳細ボタン1] | ツールバーの最初の行に含めるボタンのコンマ区切りリスト。たとえば、「太字、斜体、下線」などです。
許可されるボタン名は次のとおりです。
太字、斜体、下線、取り消し線、左揃え、中央揃え、右揃え、全揃え、スタイル選択、箇条書き、数値リスト、インデント解除、インデント、元に戻す、やり直し、リンク、リンク解除、画像、クリーンアップ、ヘルプ、コード、表、行前、行後、行削除、セパレーター、行セパレーター、列前、列後、列削除、hr、書式の削除、sub、sup、書式選択、フォント選択、フォントサイズ選択、前景色、charmap、視覚補助、スペーサー、切り取り、コピー、貼り付け | | [テーマの詳細ボタン2] | 上記と同じですが、違いはツールバーの 2 行目を指定することです。 | | [テーマ_advanced_buttons3] | 上記と同じですが、違いはツールバーの 3 行目を指定することです。 | | [theme_advanced_buttons<N>_add] | ツールバーの特定の行 N に追加のコントロール/ボタンを追加します。たとえば、 theme_advaned_buttons3_add : "iespell" です。 | | [theme_advanced_buttons<N>_add_before] | ツールバーの指定された N 行目のデフォルト ボタンの前に追加のコントロール/ボタンを追加します。たとえば、 theme_advaned_buttons3_add_before : "iespell" です。 | | [テーマ_advanced_disable] | 無効にするボタン/コンポーネントのコンマ区切りリスト。たとえば、「formatselect」などです。 | | [テーマ_advanced_source_editor_width] | ソース エディター ウィンドウの幅。 | | [テーマ_advanced_source_editor_height] | ソース エディター ウィンドウの高さ。 | | [テーマの詳細パスの場所] | コンポーネント パス リストの位置。可能な値は、「top」または「bottom」です。デフォルト値: "なし" | | [テーマ_高度なブロックフォーマット] | formatselect リストは、ブロックする形式のコンマ区切りリストです。デフォルト値: p、address、pre、h1、h2、h3、h4、h5、h6。 |
以下はより複雑な初期化の例です。
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
モード: "正確"、
テーマ：「mytheme」、
言語: "se",
要素: "elm1,elm2"
});
</スクリプト>
<!-- /tinyMCE -->
機能（上級者向け）
TinyMCE には、ページから呼び出すことができるいくつかの共通関数を提供するグローバル インスタンスがあります。
--------------------------------------------------------------------------------
構文: tinyMCE.triggerSave([skip_cleanup]);
説明: クリア操作を実行し、エディターの内容をフォーム フィールドに戻します。 tinyMCE は、フォーム送信メソッドにトリガーを追加することで、この関数を自動的に呼び出します。
パラメータ:
[skip_cleanup] - 保存トリガーのクリーンアップ機能を無効にします。デフォルトは false です。 （オプション）
戻り値: なし
--------------------------------------------------------------------------------
構文: tinyMCE.updateContent(form_element_name);
説明: フォーム コンポーネントの内容をエディターに転送します。この操作は、triggerSave() の逆の操作です。このメソッドは、エディターのコンテンツを動的に変更する場合に使用できます。
パラメータ:
form_element_name - コンテンツを取得するコンポーネントが含まれるフォームの名前。
戻り値: なし
--------------------------------------------------------------------------------
構文: tinyMCE.execInstanceCommand(editor_id, command, [user_interface], [value]);
説明: このメソッドは、editor_id パラメータを通じてエディター インスタンスを見つけ、このエディターでコマンドを実行します。
パラメータ:
editor_id - エディター インスタンス ID、または置き換えられた場合はコンポーネント ID/名前。
command - 実行されるコマンド。詳細については、execCommand 関数を参照してください。
[user_interface] - ユーザーインターフェースを使用するかどうか。
[値] - コマンドを実行するときに渡すパラメータ（URL など）。
戻り値: なし
--------------------------------------------------------------------------------
構文: tinyMCE.execCommand(command, [user_interface], [value]);
説明: このメソッドは、選択したエディターで名前によって特定のコマンドを実行します。
パラメータ:
command - 実行されるコマンド。例: 「太字」または「斜体」。 Mozilla Midas の仕様については、このリンクでご覧いただけます。ただし、tinyMCE には、次の表に示すように、いくつかの特殊なコマンドもあります。
| mceリンク | [リンクの挿入] ダイアログ ボックスを開き、リンクを挿入します。 | | mceイメージ | [画像の挿入] ダイアログ ボックスを開き、画像を挿入します。 | | mceクリーンアップ | HTML コードから不要なコンポーネントと属性を削除します。 | | mceヘルプ | ドキュメントページを開きます。 | | mceInsertTable | マウスの位置に表を挿入します。デフォルトのサイズは 2×2 です。 execCommand 関数で value パラメータが指定されている場合、その形式は name/value の形式の配列である必要があります。name には、cols、rows、border、cellspacing、cellpadding のオプションがあります。境界線のデフォルトのサイズは 0 です。 | | mceTableInsertRowBefore | 現在のカーソル位置の前に行を挿入します。 | | mceTableInsertRowAfter | 現在のカーソル位置の後に行を挿入します。 | | mceTableDeleteRow | 現在マウスが置かれている行を削除します。 | | mceTableInsertColBefore | 現在のカーソル位置の前に列を挿入します。 | | mceTableInsertColAfter | 現在のカーソル位置の後に列を挿入します。 | | mceTableDeleteCol | 現在マウスが置かれている列を削除します。 | | mceAddControl | 値によって指定された ID/名前を持つコンポーネント コントロールをエディターに追加します。 | | mceRemoveControl | editor_id 名で特定のコントロールを削除します。値は削除する editor_id (エディター ID) です。エディター ID の形式は次のとおりです: "mce_editor_<index>"。
DOM コンポーネント ID とフォーム名を使用することもできます。 | | mceフォーカス | ID 値を持つエディターにフォーカスを当てます。エディター ID の形式は次のとおりです: "mce_editor_<index>"。 DOM コンポーネント ID とフォーム名を使用することもできます。 | | mceSetCSSクラス | CSS クラスのプロパティを設定するか、選択ボックスに新しいスパンを作成します。 value の値は、選択したコンポーネントに割り当てられる CSS クラス名、または作成されるスパン コンポーネントの名前です。 | | mceコンテンツを挿入 | 現在のカーソル位置に値の内容を挿入します。 | | mceReplaceContent | 現在の選択を値の HTML コードに置き換えます。 {$selection} 変数は、現在の選択範囲のテキスト コンテンツに置き換えられます。 | | mceSet属性 | 現在選択されているコンポーネントのプロパティを設定します。このコマンドの値は、次のパラメータを持つ名前/値の配列である必要があります。
name - 設定するプロパティの名前。
value - 設定するプロパティ値。
[targets] - 属性を追加するターゲット コンポーネント。デフォルトは、p、img、span、div、td、h1、h2、h3、h4、h5、h6、pre、address です。
使用例:
tinyMCE.execCommand('mceSetAttribute',false,{name:'align',value:'right'}); | | mceToggleVisualAid | ビジュアルアシスタンスモードを有効にするかどうか | | mceアンカー | 名前アンカーを挿入します。値はアンカーポイントの名前です。 | | mceResetDesignMode | すべてのエディター インスタンスのデザイン モードの状態をリセットします。 Firefox では、このコマンドはエディターがタブ内に配置されている場合、または style.display="none/block" で非表示になっている場合に便利です。このコマンドは、エディターが再表示されたときに呼び出されます。 | | mceSelectNode | 値で指定されたノード/コンポーネントを選択します。同時に、このコマンドはエディターをこのコンポーネントの場所までスクロールします。 | | mceSelectNodeDepth | 深さ関係によって現在のノードから指定されたノード/コンポーネントを選択します。したがって、値 0 は現在フォーカスされているノードを選択します。同時に、このコマンドはエディターをこのコンポーネントの場所までスクロールします。 |
user_interface - コマンドがユーザー インターフェイスを表示するかどうかを指定します。真偽オプション。
value - コマンドに渡される値。たとえば、リンクを挿入する場合、これはリンクの URL になります。
戻り値:なし
例： | <a href="javascript :tinymce.execCommand('Bold'); "> [太字にする]</a> |
構文: tinyMCE.insertLink(href, target);
説明:このメソッドは、現在選択されているエディター インスタンスのカーソル位置にリンクを挿入するか、既存のリンクを新しいデータで更新します。独自のテーマを作成する場合、リンクを挿入するポップアップ ウィンドウで [OK] ボタンが押されたときにこのメソッドを呼び出す必要があります。
パラメータ:
href - リンクのアドレス/URL。
target - リンクのターゲット。
戻り値:なし
構文: tinyMCE.insertImage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout);
説明:このメソッドは、現在選択されているエディター インスタンスのカーソル位置に画像を挿入するか、既存の画像を新しいデータで更新します。独自のテーマを作成する場合、画像を挿入するポップアップ ウィンドウの [OK] ボタンが押されたときにこのメソッドを呼び出す必要があります。
パラメータ:
src : 画像のアドレス。
alt - 画像の代替テキスト。
border - 画像の境界線。
hspace - 画像の水平間隔。
vspace - 画像の垂直間隔。
width - 画像の幅。
height - 画像の高さ。
align - 画像の配置。
title – 画像リンクのタイトル。
onmouseover - マウスが画像の上にあるときのイベント ハンドラー。
onmouseout - マウスが画像から外れたときのイベント ハンドラー。
戻り値:なし
構文: tinyMCE.triggerNodeChange();
説明:このメソッドは、エディターが外部変更を受けたときに呼び出されます。このメソッドは、サブジェクトの「handleNodeChangeCallback」メソッドをコールバックします。
パラメータ:なし
戻り値:なし
構文: tinyMCE.getContent();
説明:このメソッドは、現在選択されているエディターの HTML コンテンツを返します。選択されたエディターがない場合、メソッドは null を返します。
パラメータ:なし
戻り値:現在選択されているエディターの HTML コンテンツまたは null。
構文: tinyMCE.setContent(html);
説明:このメソッドは、現在選択されているエディターの HTML コンテンツを設定します。
パラメータ:
html - 設定する HTML ソース コード。
戻り値:なし。
構文: tinyMCE.getEditorInstance(editor_id);
説明:このメソッドは、editor_id によってエディター インスタンスを返します。
パラメータ:
editor_id - 取得するエディター インスタンス。
戻り値:エディター インスタンス (TinyMCEControl)。
構文: tinyMCE.importThemeLanguagePack([theme]);
説明:このメソッドは、テーマ内の特定の言語パックをインポートします。このメソッドはカスタム テーマで呼び出すことができます。
パラメータ:
[theme] - 現在のテーマの名前。このオプションはオプションであり、デフォルトではグローバルな「テーマ」設定になります。このパラメータはテーマプラグインで非常に役立ちます。
戻り値:なし。
構文: tinyMCE.importPluginLanguagePack(plugin, valid_languages);
説明:このメソッドは、プラグイン固有の言語パックをインポートします。このメソッドはカスタムプラグインから呼び出すことができます。
パラメータ:
plugin - 現在のプラグインの名前。
valid_languages - サポートされている言語パックのコンマ区切りリスト。
戻り値:なし。
構文: tinyMCE.applyTemplate(html);
説明:このメソッドは、テーマ内の設定と言語変数を置き換えます。
パラメータ:
html – テーマ変数を置き換える HTML コード。
戻り値:変換された HTML コード。
構文: tinyMCE.openWindow(template, [args]);
説明:このメソッドは、指定されたテンプレート パラメータから幅、高さ、HTML データを取得して新しいウィンドウを開きます。配列パラメータ args には、置き換えられる変数名が含まれます。
いくつかのカスタム ウィンドウ パラメータもあります。
mce_replacevariables - HTML ドキュメント内の言語/変数の置換を有効/無効にします。デフォルトで有効になっています。
mce_windowresize - ポップアップ ウィンドウの自動サイズ変更機能を有効/無効にします。デフォルトで有効になっています。
パラメータ:
テンプレート - 幅、高さ、HTML、およびファイルをキーとする名前/値の配列。
[args] - 置換する変数名を含む名前/値の配列。テンプレート ファイル内のキー値変数は、パラメーター リストに置き換えられます。
たとえば、image.php?src={$src} は image.php?src=image.gif に置き換えられます。
戻り値:なし。
構文: tinyMCE.getWindowArg(name, [default_value]);
説明:このメソッドは、名前に応じてウィンドウ パラメータを返します。テーマのポップアップ ウィンドウでダイアログ ボックスのパラメータを取得するために使用できます。
パラメータ:
name - 取得するウィンドウ パラメータの名前。
[default_value] - ウィンドウパラメータが欠落している場合に返されるデフォルト値。
戻り値:ウィンドウ パラメータの値。
構文: tinyMCE.setWindowArg(name, value);
説明:このメソッドは、名前に応じてウィンドウ パラメータを設定します。たとえば、プラグインが他のプラグインを呼び出す場合に非常に便利です。
パラメータ:
name - 設定するウィンドウ パラメータ。
value - ウィンドウ パラメータに設定する値。
戻り値:ウィンドウ パラメータ値。
構文: tinyMCE.getParam(name, [default_value], [strip_whitespace]);
説明:このメソッドは、TinyMCE の構成パラメータを返します。
パラメータ:
name - 取得するウィンドウ パラメータの名前。
[default_value] - ウィンドウパラメータが欠落している場合に返されるデフォルト値。
[strip_whitespace] - true の場合、戻り値内のすべての空白文字が削除されます。デフォルト: false。 TinyMce ユーザーエクスペリエンス
tinyMce は強力な js ベースのリッチ テキスト エディターです。
公式ホームページ: http://www.tinymce.com/
現在最新バージョンは 3.4.7 です。このエディターの機能は Microsoft Office の機能とほぼ同等です。エディター内のすべての編集ツールはカスタマイズ可能で、ほとんどの高度な機能はプラグインの形で追加されます。開発者は必要に応じて独自の機能を追加/削除できます。
まず、tinyMce 開発キットをダウンロードします (多数のサンプルが含まれており、ソースコードも表示できる開発バージョンをダウンロードすることをお勧めします)
ダウンロードリンク: https://www.jb51.net/codes/44180.html http://www.tinymce.com/download/download.php
次に、使用する必要があるWebページにtinyMceファイルを追加します。
<script type="text/javascript" src="common/tiny_mce/tiny_mce_src.js"></script>
js ファイルを追加するだけで、tinyMce はそれに必要な他の css と js を読み込みます。
次に、ページの<body>に<textarea id="myRTE"></textarea>を配置します。
最後に、tinyMce の init メソッドを使用して、メソッド構成で textarea をバインドします。
jsp ページ コード
<%@ ページ言語="java" インポート="java.util.*" ページエンコーディング="UTF-8"%> <% 文字列パス = request.getContextPath(); 文字列 basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <ヘッド> <title>ワードプロセッサの例</title> <meta http-equiv="X-UA-compatible" content="IE=edge" /> <!-- TinyMCE --> <script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ // 一般オプション モード: "テキストエリア", テーマ：「上級」、 スキン: "o2k7", プラグイン: "自動リンク、リスト、改ページ、スタイル、レイヤー、テーブル、保存、advhr、advimage、advlink、感情、iespell、挿入日時、プレビュー、メディア、検索置換、印刷、コンテキストメニュー、貼り付け、方向性、全画面、編集不可、visualchars、改行なし、xhtmlxtras、テンプレート、インラインポップアップ、自動保存"、 // テーマオプション theme_advanced_buttons1 : "保存、新規文書、|、太字、斜体、下線、取り消し線、|、左揃え、中央揃え、右揃え、全揃え、|、スタイル選択、書式選択、フォント選択、フォントサイズ選択", theme_advanced_buttons2 : "切り取り、コピー、貼り付け、テキスト貼り付け、単語貼り付け、|、検索、置換、|、箇条書き、数値リスト、|、アウトデント、インデント、引用ブロック、|、元に戻す、やり直し、|、リンク、リンク解除、アンカー、画像、クリーンアップ、ヘルプ、コード、|、日付挿入、時間挿入、プレビュー、|、前景色、背景色", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4 : "insertlayer、moveforward、movebackward、absolute、|、styleprops、|、cite、abbr、acronym、del、ins、attribs、|、visualchars、nonbreaking、template、pagebreak、restoredraft"、 theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "左", theme_advanced_statusbar_location : "下", theme_advanced_resizing : true、 // 単語コンテンツCSSの例（サイトのCSSにする必要があります）これは段落の余白を削除します content_css: "css/word.css", // リンク/画像/メディア/テンプレートダイアログのドロップリスト テンプレート外部リストの URL: "lists/template_list.js", 外部リンクリストのURL: "lists/link_list.js", 外部画像リストのURL: "lists/image_list.js", media_external_list_url: "lists/media_list.js", // テンプレートプラグインの値を置き換える テンプレートの置換値 : { ユーザー名: "あるユーザー"、 スタッフID: "991234" } }); </スクリプト> <!-- /TinyMCE --> </head> <本文> <フォームメソッド="post" アクション="http://tinymce.moxiecode.com/dump.php?example=true"> <h3>ワードプロセッサの例</h3> <p> このページでは、TinyMCE を一般的なワードプロセッサのように動作するように設定する方法を説明します。 Wiki には TinyMCE の使用方法に関する例がさらにあります。 </p> <!-- TinyMCE に置き換えられます。テキストエリア内の HTML はエンコードする必要があることに注意してください --> <テキストエリア id="elm1" name="elm1" 行数="15" 列数="80" スタイル="幅: 80%"> <p>これが最初の段落です。</p> <p>これは2番目の段落です。</p> <p>これは3番目の段落です。</p> </テキストエリア> <input type="submit" name="save" value="送信" /> <input type="reset" name="reset" value="リセット" /> </フォーム> <script type="text/javascript"> document.location.protocol == 'ファイル:'の場合{ alert("ブラウザのセキュリティ設定により、例はローカル ファイル システム上では正しく動作しない可能性があります。実際の Web サーバーを使用してください。"); } </スクリプト> </本文> </html>
さらに、必要なjsファイルはすべて、公式サイトからダウンロードしたtinymce_3.5_devファイルの下のjscriptsにあります。このフォルダをmyeclipseのwebrootの下に置きます。
| 
