• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

TinyMCE

提供: WordPress Codex 日本語版
移動先: 案内検索

この項目「TinyMCE」は、翻訳チェック待ちの項目です。加筆、訂正などを通して、Codex ドキュメンテーションにご協力下さい。


WordPress には、Moxiecode Systems, AB が作者のオープンソースの HTML WYSIWYGエディターである TinyMCE がバンドルされています。

WordPress 3.9 がリリースされたとき、WordPress コアに含まれる TinyMCE がメジャーアップデートされてバージョン 4.0 になりました。TinyMCE バージョン 4 には多くの変更点があります:

  • 新しい UI と UI API。
  • 新テーマ。
  • イベントシステム/API の刷新。
  • コードのより良い品質、読みやすさとビルドプロセス。
  • 多数の(インライン)ドキュメント。
  • そして全般的にあらゆるところを改良。

新機能の多くをとりあげた スライドショー変更履歴 があります。

TinyMCE プラグイン

WordPress プラグインとして追加された TinyMCE 用のプラグインには、一般的に 3 つのグループがあります。TinyMCE バージョン 4 への対応方法がそれぞれ異なります:

  • WordPress プラグイン専用に作成されたカスタムプラグイン。この種類のプラグインを自分で開発していた場合は、3.x から 4.0 へのマイグレーションガイドと 4.0 API ドキュメンテーション をお読みください。
  • サードパーティー製またはデフォルトの TinyMCE プラグインを追加する WordPress プラグイン。これはバージョン 4.0 にするため、更新する必要があります。PHP のグローバル変数 $tinymce_version を使えば、どちらのバージョンのプラグインをロードするか判定できます。
  • ツールバーへボタンを追加するだけのミニプラグイン。TinyMCE 4 になってもほぼ同じように動作します。イメージアイコンの代わりに 'dashicons' アイコンフォントを使うように更新を推奨します。

高度な編集用のボタン

WYSIWYG エディターにもっとボタンが欲しいですか? 高度な編集用のツールバー(エディターの 2 行目)を呼び出して、1 ダース以上の拡張ボタンを利用できます。

ツールバーの各ボタンにマウスポインターを重ねてください。するとツールチップが表示されます。「ツールバー切り替え」というツールチップが出たら、そのボタンをクリックしてください。このボタンの用途はエディターボタンの 2 行目の展開と折りたたみです。

もし「ツールバー切り替え」ボタンがエディターの別の行へ移動していたら(カスタムフックやフィルターによって)、クリックするとすべてのエディターボタンの行が削除される可能性があります。もしそうなったらボタンを「ON」へ戻すために Alt-V(IE)または シフト-Alt-V(Firefox)を使ってください。

WordPress バージョン 3.3.1 では、IE と Firefox 用の正しい切り替えコマンドは シフト-Alt-Z です。

ボタンの追加

WordPress の TinyMCE へ独自のボタンを追加する簡単な方法(Plugin API とフックを理解している前提で)があります。TinyMCE Custom Buttons /en のページを見てください。もっと情報が必要ならプラグイン API の リッチテキストエディター用フィルター /en も見てください。

詳細なチュートリアルが WP Tuts + にあります。

高度な編集用のプラグイン

高度な編集用のツールバーボタンでは不充分だが独自ボタンの作成は避けたいなら、たぶん TinyMCE エディターの機能拡張用プラグインを探すとよいでしょう。例えば:

WordPress プラグインディレクトリー から他のプラグインを探せます。

段落タグを自動的に使用する

WordPress と TinyMCE WYSIWYG エディターはデフォルトの場合、改行位置に段落タグ(P タグまたは <p>)を自動的に追加します。このデフォルト機能は、使い始めたばかりのユーザーが標準のコーディング規約に従うのを助けるためにインストールされています。

上級ユーザーの多くにとっては、段落タグが追加する余分な行間がサイト全体のデザインの邪魔になるときがあります。そのような場合には P タグの自動使用や特定条件での使用を停止する機能が必要です。

P タグを完全に無効にした場合、その代わりにテキストエディターで段落タグを手入力するのはユーザーの責任になります。

P タグを削除するとき 3 つのオプションがあります。それは:

  • サイト全体
  • 特定のテンプレートページ
  • 特定のページ項目

詳しくは下記を見てください。

これを手助けするプラグインが WordPress プラグインディレクトリー で見つかるかもしれません。

フィルターによる TinyMCE のカスタマイズ

次のようなカスタマイズを行うために初期設定の配列をフィルター tiny_mce_before_init で変更できます。

  • エディターに表示されるボタンを変える
  • ビジュアルエディターのコンテンツにスタイルをつけるためにカスタム CSS ファイルを使う
  • TinyMCE に style や span などを削除させない
  • その他 TinyMCE のあらゆるところ

デフォルト設定は /wp-includes/class-wp-editor.php で確認できます。以下はその一部です。

function my_format_TinyMCE( $in ) {
	$in['remove_linebreaks'] = false;
	$in['gecko_spellcheck'] = false;
	$in['keep_styles'] = true;
	$in['accessibility_focus'] = true;
	$in['tabfocus_elements'] = 'major-publishing-actions';
	$in['media_strict'] = false;
	$in['paste_remove_styles'] = false;
	$in['paste_remove_spans'] = false;
	$in['paste_strip_class_attributes'] = 'none';
	$in['paste_text_use_dialog'] = true;
	$in['wpeditimage_disable_captions'] = true;
	$in['plugins'] = 'tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';
	$in['content_css'] = get_template_directory_uri() . "/editor-style.css";
	$in['wpautop'] = true;
	$in['apply_source_formatting'] = false;
        $in['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";
	$in['toolbar1'] = 'bold,italic,strikethrough,bullist,numlist,blockquote,hr,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,wp_fullscreen,wp_adv ';
	$in['toolbar2'] = 'formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help ';
	$in['toolbar3'] = '';
	$in['toolbar4'] = '';
	return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );

変更履歴

あわせて読む

外部リソース


最新英語版: WordPress Codex » TinyMCE最新版との差分

この記事は翻訳時に編集が必要であるとマークされていました。その為Codex原文が大きく編集されている可能性があります。内容を確認される際は原文を参照していただき、可能であれば本項目へ反映させてください。よりよいCodexを作成するためのお手伝いをお願いします。