「TinyMCE」の版間の差分

2015年9月5日 (土) 17:34時点における最新版

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

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

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

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

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 エディターの機能拡張用プラグインを探すとよいでしょう。例えば：

• TinyMCE Custom Buttons /en（WordPress Codex）
• TinyMCE Advanced（LaptopTips.ca）

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

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

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

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

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

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

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

• Removing P Tags in WordPress

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

次のようなカスタマイズを行うために初期設定の配列をフィルター 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 4.0: TinyMCE 4.1.3
• WordPress 3.9: TinyMCE 4.0
• WordPress 3.8-WordPress 3.5: TinyMCE 3.5.8
• WordPress 3.4: TinyMCE 3.4.9
• WordPress 3.3: TinyMCE 3.4.5
• WordPress 3.2: TinyMCE 3.4.2
• WordPress 3.1: TinyMCE 3.3

• 記事を投稿する
• WordPress の投稿データ処理
• wp_editor （TinyMCE エディターのレンダリング/表示）

• Creating Your Own WordPress Editor Buttons

• TinyMCE
• チュートリアル: TinyMCE Custom Buttons /en
• チュートリアル: Creating a Custom Style Dropdown /en
• 関数: add_editor_style()
• フィルター: mce_spellchecker_languages /en
• フィルター: mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4 /en
• フィルター: mce_css /en
• フィルター: mce_external_plugins /en
• フィルター: mce_external_languages /en
• フィルター: tiny_mce_before_init /en

最新英語版： WordPress Codex » TinyMCE （最新版との差分）