tinyMCEの使い方と体験の詳細な説明

tinyMCEの使い方と体験の詳細な説明

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 でエンコードされます。

たとえば、< は &lt; になります。デフォルト値は空です。
[デバッグ]真偽オプション。 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%">
&lt;p&gt;これが最初の段落です。&lt;/p&gt;
&lt;p&gt;これは2番目の段落です。&lt;/p&gt;
&lt;p&gt;これは3番目の段落です。&lt;/p&gt;
</テキストエリア>

<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の下に置きます。

<<:  JavaScript 文字列オブジェクトメソッド

>>:  MySQL の datetime フィールドの丸め操作

推薦する

MySql 学習ノートにおけるトランザクション分離レベルの詳細な説明

背景トランザクションについて話すとき、誰もがそれに精通している必要があります。MySQL データベー...

docker を使用して Linux 環境に Springboot パッケージをデプロイするチュートリアル

springboot には tomcat サーバーが組み込まれているため、jar パッケージにパッケ...

Docker に influxdb をインストールするための詳細なチュートリアル (パフォーマンス テスト)

1. 前提条件1. プロジェクトが展開されました2. Dockerはすでにインストールされている2...

Linuxはnode.jsを完全に削除し、yumコマンドで再インストールします。

最初のステップ組み込みのパッケージ管理機能で一度削除する yum 削除 nodejs npm -y ...

Docker プライベートリポジトリの管理とローカルリポジトリ内のイメージの削除

1: Dockerプライベートウェアハウスのインストール1. イメージリポジトリからイメージをダウン...

docker を使用して kafka プロジェクトをデプロイする Centos6 方法の分析

この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...

CSSを使用して特別なロゴやグラフィックを実装する

1. はじめに画像は多くのスペースを占め、画像の数が増えるほど管理が難しくなるため、シンプルなラベル...

Linux コマンドラインのクイックヒント: ファイルの検索方法

私たちのコンピューターには、ディレクトリ、写真、ソース コードなどのファイルが保存されています。たく...

ブラウザが登録できるイベントの概要

HTML イベント リスト一般イベント: onClick HTML: マウスクリックイベント。主にオ...

ins タグと del タグの属性と使用法

insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...

MySQL インデックスの使用方法 (単一列インデックスと複数列インデックス)

1. 単一列インデックスどの列にインデックスを作成するかを選択することは、パフォーマンス最適化プロ...

Spring Boot のパッケージ化と Docker リポジトリへのアップロードの詳細な手順

重要な注意: この記事を読む前に、Docker コンテナに関する知識と、一般的な Docker 操作...

Nginx で Basic Auth ログイン認証を設定する方法

nginx でファイルサーバーを構築することもありますが、これは一般に公開されていますが、サーバーが...

Reactのref属性を深く理解する方法

目次概要1. Refsオブジェクトの作成1.1 React.createRef() 1.2React...

html-cssタグのスタイル設定が機能しない2つの理由

1 セミコロン「;」のない CSS スタイル2 タグが閉じられておらず、「>」がありません...