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

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

「TinyMCE」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(2015-06-17T01:41:26‎ Mkormendy 版から新規作成。英語流し込み。)
 
(残りを和訳。)
 
(2人の利用者による、間の5版が非表示)
1行目: 1行目:
WordPress is bundled with the open source HTML WYSIWYG editor [http://www.tinymce.com TinyMCE] by [http://moxiecode.com Moxiecode Systems, AB].
+
{{CheckTrans}}
  
 +
 +
WordPress には、[http://moxiecode.com Moxiecode Systems, AB] が作者のオープンソースの HTML WYSIWYGエディターである [http://www.tinymce.com TinyMCE] がバンドルされています。
 +
 +
<div id="TinyMCE_4">
 
== TinyMCE 4 ==
 
== TinyMCE 4 ==
WordPress 3.9 was released with a major update to TinyMCE version 4.0 in WordPress core. TinyMCE version 4 provides many changes:
+
</div>
* New UI and UI API.
+
* New theme.
+
* Revamped events system/API.
+
* Better code quality, readability and build process.
+
* Lots of (inline) documentation.
+
* And generally many improvements everywhere.
+
  
There is a [http://www.tinymce.com/presentation/#/ slideshow] and [http://www.tinymce.com/develop/changelog/?type=tinymce changelog] which highlights many of the new features.
+
WordPress 3.9 がリリースされたとき、WordPress コアに含まれる TinyMCE がメジャーアップデートされてバージョン 4.0 になりました。TinyMCE バージョン 4 には多くの変更点があります:
 +
* 新しい UI と UI API。
 +
* 新テーマ。
 +
* イベントシステム/API の刷新。
 +
* コードのより良い品質、読みやすさとビルドプロセス。
 +
* 多数の(インライン)ドキュメント。
 +
* そして全般的にあらゆるところを改良。
  
== TinyMCE Plugins ==
+
新機能の多くをとりあげた [http://www.tinymce.com/presentation/#/ スライドショー] と [http://www.tinymce.com/develop/changelog/?type=tinymce 変更履歴] があります。
Generally, there are three groups of TinyMCE plugins added by WordPress plugins:
+
  
* Custom plugin created specifically for the WordPress plugin. If you’ve developed this kind of plugin, please see the [http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x 3.x to 4.0] migration guide and the [http://www.tinymce.com/wiki.php/api4:index 4.0 API documentation].
+
<div id="TinyMCE_Plugins">
* WordPress plugins that add third-party or default TinyMCE plugins need to be updated to include the 4.0 version of the plugin. The PHP global $tinymce_version can be used to determine which plugin to load.
+
== TinyMCE プラグイン ==
* Mini-plugins that only add a button to the toolbar. This works pretty much the same. It is advisable to update to use the ‘dashicons’ icon font instead of image icon.
+
</div>
  
== Advanced Editing Buttons ==
+
WordPress プラグインとして追加された TinyMCE 用のプラグインには、一般的に 3 つのグループがあります。TinyMCE バージョン 4 への対応方法がそれぞれ異なります:
  
Looking for more buttons in the WYSIWYG editor? You can toggle the Advanced Editor Toolbar (row 2 of the editor) and unlock a dozen or so extra buttons.
+
* WordPress プラグイン専用に作成されたカスタムプラグイン。この種類のプラグインを自分で開発していた場合は、[http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x 3.x から 4.0] へのマイグレーションガイドと [http://www.tinymce.com/wiki.php/api4:index 4.0 API ドキュメンテーション] をお読みください。
 +
* サードパーティー製またはデフォルトの TinyMCE プラグインを追加する WordPress プラグイン。これはバージョン 4.0 にするため、更新する必要があります。PHP のグローバル変数 $tinymce_version を使えば、どちらのバージョンのプラグインをロードするか判定できます。
 +
* ツールバーへボタンを追加するだけのミニプラグイン。TinyMCE 4 になってもほぼ同じように動作します。イメージアイコンの代わりに 'dashicons' アイコンフォントを使うように更新を推奨します。
  
Simply hover over each button in the toolbar, noting the tooltips. When you see "Toggle Toolbar" as a tooltip, click that button. Note the purpose of this button is to expand/collapse row 2 of the editor buttons.
+
<div id="Advanced_Editing_Buttons">
 +
== 高度な編集用のボタン ==
 +
</div>
  
If the "Toggle Toolbar" button is moved to another row of the editor (via custom hooks or filters), it's possible clicking the button will remove all editor button rows.  In this case; you must use Alt-V (IE) or Shift-Alt-V (Firefox) to toggle the advanced buttons back "on".
+
WYSIWYG エディターにもっとボタンが欲しいですか? 高度な編集用のツールバー(エディターの 2 行目)を呼び出して、1 ダース以上の拡張ボタンを利用できます。
  
In WP version 3.3.1 the correct toggle command for IE and Firefox is Shift-Alt-Z.
+
ツールバーの各ボタンにマウスポインターを重ねてください。するとツールチップが表示されます。「ツールバー切り替え」というツールチップが出たら、そのボタンをクリックしてください。このボタンの用途はエディターボタンの 2 行目の展開と折りたたみです。
  
== Adding Buttons ==
+
もし「ツールバー切り替え」ボタンがエディターの別の行へ移動していたら(カスタムフックやフィルターによって)、クリックするとすべてのエディターボタンの行が削除される可能性があります。もしそうなったらボタンを「ON」へ戻すために Alt-V(IE)または シフト-Alt-V(Firefox)を使ってください。
  
There is a simple (if you understand the Plugin API and hooks) means of adding your own buttons to TinyMCE in WordPress on the [[TinyMCE Custom Buttons]] page. See also [[Plugin_API/Filter_Reference#Rich_Text_Editor_Filters|Plugin API Rich Text Editor Filters]] for more information.
+
WordPress バージョン 3.3.1 では、IE と Firefox 用の正しい切り替えコマンドは シフト-Alt-Z です。
  
A detailed tutorial is also available on [http://wp.tutsplus.com/tutorials/theme-development/guide-to-creating-your-own-wordpress-editor-buttons/ WP Tuts +]
+
<div id="Adding_Buttons">
 +
== ボタンの追加 ==
 +
</div>
  
== Advanced Editing Plugins ==
+
WordPress の TinyMCE へ独自のボタンを追加する簡単な方法(Plugin API とフックを理解している前提で)があります。[[TinyMCE Custom Buttons]] /[[:en:TinyMCE Custom Buttons|en]] のページを見てください。もっと情報が必要ならプラグイン API の [[プラグイン API/フィルターフック一覧#Rich_Text_Editor_Filters|リッチテキストエディター用フィルター]] /[[:en:Plugin_API/Filter_Reference#Rich_Text_Editor_Filters|en]] も見てください。
  
If the Advanced Editing Toolbar buttons are not sufficient, and writing your own buttons isn't your thing, perhaps you're looking for a plugin to extend the functionality of the TinyMCE editor. Examples include:
+
詳細なチュートリアルが [http://wp.tutsplus.com/tutorials/theme-development/guide-to-creating-your-own-wordpress-editor-buttons/ WP Tuts +] にあります。
  
* [[TinyMCE Custom Buttons]] (WordPress Codex)
+
<div id="Advanced Editing Plugins">
* [http://www.laptoptips.ca/projects/tinymce-advanced/ TinyMCE Advanced] (LaptopTips.ca)
+
== 高度な編集用のプラグイン ==
 +
</div>
  
You can find more in the [http://wordpress.org/extend/plugins/ WordPress Plugin Directory].
+
高度な編集用のツールバーボタンでは不充分だが独自ボタンの作成は避けたいなら、たぶん TinyMCE エディターの機能拡張用プラグインを探すとよいでしょう。例えば:
  
== Automatic use of Paragraph Tags ==
+
* [[TinyMCE Custom Buttons]] /[[:en:TinyMCE Custom Buttons|en]](WordPress Codex)
By default Wordpress & the TinyMCE WYSIWYG editor will automatically add paragraph tags ( P tags or <tt>&lt;p&gt;</tt> ) around line breaks. This default functionality was installed to assist new users in adhering to standard coding principles.
+
* [http://www.laptoptips.ca/projects/tinymce-advanced/ TinyMCE Advanced](LaptopTips.ca)
  
For many advanced users there are times when the additional spacing caused by paragraph tags interferes with the overall design of the site. For these users the ability to remove the automatic use of P tags or a specific use of P tags is required.  
+
[http://wordpress.org/extend/plugins/ WordPress プラグインディレクトリー] から他のプラグインを探せます。
  
In the case where P tags are disabled completely the user will then be responsible for manually adding paragraph tags themselves via the Text editor instead.
+
<div id="Automatic_use_of_Paragraph_Tags">
 +
== 段落タグを自動的に使用する ==
 +
</div>
  
There are 3 primary options for removing P tags. These include:
+
WordPress と TinyMCE WYSIWYG エディターはデフォルトの場合、改行位置に段落タグ(P タグまたは <tt>&lt;p&gt;</tt>)を自動的に追加します。このデフォルト機能は、使い始めたばかりのユーザーが標準のコーディング規約に従うのを助けるためにインストールされています。
  
* Through out entire site
+
上級ユーザーの多くにとっては、段落タグが追加する余分な行間がサイト全体のデザインの邪魔になるときがあります。そのような場合には P タグの自動使用や特定条件での使用を停止する機能が必要です。
* On specific Template pages
+
* With specific page items
+
  
 +
P タグを完全に無効にした場合、その代わりにテキストエディターで段落タグを手入力するのはユーザーの責任になります。
  
Options Include:
+
P タグを削除するとき 3 つのオプションがあります。それは:
 +
 
 +
* サイト全体
 +
* 特定のテンプレートページ
 +
* 特定のページ項目
 +
 
 +
詳しくは下記を見てください。
  
 
* [http://redrokk.com/2010/08/16/removing-p-tags-in-wordpress/ Removing P Tags in WordPress]
 
* [http://redrokk.com/2010/08/16/removing-p-tags-in-wordpress/ Removing P Tags in WordPress]
  
You may also find plugins to assist with this at [http://wordpress.org/extend/plugins/ WordPress Plugins]
+
これを手助けするプラグインが [http://wordpress.org/extend/plugins/ WordPress プラグインディレクトリー] で見つかるかもしれません。
  
== Customize TinyMCE with Filters ==
+
<div id="Customize_TinyMCE_with_Filters">
If you want to customize which buttons are shown in the editor, or you want to use a custom css file to stylize the visual editor contents, or to prevent tinyMCE from removing styles, spans, etc.. or to customize every aspect of TinyMCE, you can modify the init settings array with the use of the filter '''tiny_mce_before_init'''.
+
== フィルターによる TinyMCE のカスタマイズ ==
 +
</div>
  
You can see the default settings in <tt>/wp-includes/class-wp-editor.php</tt>, here are some options.
+
次のようなカスタマイズを行うために初期設定の配列をフィルター '''tiny_mce_before_init''' で変更できます。
 +
* エディターに表示されるボタンを変える
 +
* ビジュアルエディターのコンテンツにスタイルをつけるためにカスタム CSS ファイルを使う
 +
* TinyMCE に style や span などを削除させない
 +
* その他 TinyMCE のあらゆるところ
 +
 
 +
デフォルト設定は <tt>/wp-includes/class-wp-editor.php</tt> で確認できます。以下はその一部です。
 
<pre>
 
<pre>
 
function my_format_TinyMCE( $in ) {
 
function my_format_TinyMCE( $in ) {
95行目: 119行目:
 
</pre>
 
</pre>
  
== Change Log ==
+
<div id="Change_Log">
 +
== 変更履歴 ==
 +
</div>
  
 
* [[Version 4.0|WordPress 4.0]]: TinyMCE 4.1.3
 
* [[Version 4.0|WordPress 4.0]]: TinyMCE 4.1.3
105行目: 131行目:
 
* [[Version 3.9|WordPress 3.1]]: TinyMCE 3.3
 
* [[Version 3.9|WordPress 3.1]]: TinyMCE 3.3
  
== See Also ==
+
<div id="See Also">
 +
== あわせて読む ==
 +
</div>
  
* [[Writing Posts]]
+
* [[Writing Posts|記事を投稿する]]
* [[How WordPress Processes Post Content]]
+
* [[How WordPress Processes Post Content|WordPress の投稿データ処理]]
* [[Function Reference/wp_editor|wp_editor]] (to render/print a TinyMCE editor)
+
* [[関数リファレンス/wp_editor|wp_editor]] (TinyMCE エディターのレンダリング/表示)
  
== External Resources ==
+
<div id="External_Resources">
 +
== 外部リソース==
 +
</div>
  
 
* [http://wp.tutsplus.com/tutorials/theme-development/guide-to-creating-your-own-wordpress-editor-buttons/ Creating Your Own WordPress Editor Buttons]
 
* [http://wp.tutsplus.com/tutorials/theme-development/guide-to-creating-your-own-wordpress-editor-buttons/ Creating Your Own WordPress Editor Buttons]
  
== Related ==
+
<div id="Related">
 +
==関連 ==
 +
</div>
 +
 
 
{{TinyMCE API}}
 
{{TinyMCE API}}
  
 +
{{原文|TinyMCE|153126}} <!-- 2015-08-05T09:04:22 Nao 版 -->
  
[[Category:About WordPress]]
+
[[Category:WordPress について]]
 
{{Copyedit}}
 
{{Copyedit}}
 +
 +
[[en:TinyMCE]]

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

この項目「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を作成するためのお手伝いをお願いします。