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

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

「TinyMCE」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(TinyMCE 4: )
(残りを和訳。)
 
(他の1人の利用者による、間の2版が非表示)
1行目: 1行目:
{{NeedTrans}}
+
{{CheckTrans}}
  
WordPress is bundled with the open source HTML WYSIWYG editor [http://www.tinymce.com TinyMCE] by [http://moxiecode.com Moxiecode Systems, AB].
 
  
<div id="TinyMCE 4">
+
WordPress には、[http://moxiecode.com Moxiecode Systems, AB] が作者のオープンソースの HTML WYSIWYGエディターである [http://www.tinymce.com TinyMCE] がバンドルされています。
 +
 
 +
<div id="TinyMCE_4">
 
== TinyMCE 4 ==
 
== TinyMCE 4 ==
 
</div>
 
</div>
  
WordPress 3.9で、WordPress コアに TinyMCE のバージョン4.0へのメジャーアップデートがリリースされました。
+
WordPress 3.9 がリリースされたとき、WordPress コアに含まれる TinyMCE がメジャーアップデートされてバージョン 4.0 になりました。TinyMCE バージョン 4 には多くの変更点があります:
TinyMCEのバージョン4は、多くの変更を提供します。:
+
 
* 新しい UI と UI API。
 
* 新しい UI と UI API。
 
* 新テーマ。
 
* 新テーマ。
 
* イベントシステム/API の刷新。
 
* イベントシステム/API の刷新。
* より良いコードの品質、読みやすさとビルドプロセス。
+
* コードのより良い品質、読みやすさとビルドプロセス。
* 多数の (インライン) ドキュメント。
+
* 多数の(インライン)ドキュメント。
* そして全体的に至る所を改良。
+
* そして全般的にあらゆるところを改良。
 
+
[http://www.tinymce.com/presentation/#/ slideshow] と [http://www.tinymce.com/develop/changelog/?type=tinymce changelog]に、多数ある新機能のハイライトがあります。
+
  
<div id="TinyMCE Plugins">
+
新機能の多くをとりあげた [http://www.tinymce.com/presentation/#/ スライドショー] と [http://www.tinymce.com/develop/changelog/?type=tinymce 変更履歴] があります。
  
 +
<div id="TinyMCE_Plugins">
 
== TinyMCE プラグイン ==
 
== TinyMCE プラグイン ==
 
</div>
 
</div>
  
Generally, there are three groups of TinyMCE plugins added by WordPress plugins:
+
WordPress プラグインとして追加された TinyMCE 用のプラグインには、一般的に 3 つのグループがあります。TinyMCE バージョン 4 への対応方法がそれぞれ異なります:
  
* 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].
+
* 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 ドキュメンテーション] をお読みください。
* 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 プラグインを追加する WordPress プラグイン。これはバージョン 4.0 にするため、更新する必要があります。PHP のグローバル変数 $tinymce_version を使えば、どちらのバージョンのプラグインをロードするか判定できます。
* 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.
+
* ツールバーへボタンを追加するだけのミニプラグイン。TinyMCE 4 になってもほぼ同じように動作します。イメージアイコンの代わりに 'dashicons' アイコンフォントを使うように更新を推奨します。
  
<div id="Advanced Editing Buttons">
+
<div id="Advanced_Editing_Buttons">
== 高度なボタンの編集 ==
+
== 高度な編集用のボタン ==
 
</div>
 
</div>
  
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.
+
WYSIWYG エディターにもっとボタンが欲しいですか? 高度な編集用のツールバー(エディターの 2 行目)を呼び出して、1 ダース以上の拡張ボタンを利用できます。
  
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.
+
ツールバーの各ボタンにマウスポインターを重ねてください。するとツールチップが表示されます。「ツールバー切り替え」というツールチップが出たら、そのボタンをクリックしてください。このボタンの用途はエディターボタンの 2 行目の展開と折りたたみです。
  
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".
+
もし「ツールバー切り替え」ボタンがエディターの別の行へ移動していたら(カスタムフックやフィルターによって)、クリックするとすべてのエディターボタンの行が削除される可能性があります。もしそうなったらボタンを「ON」へ戻すために Alt-V(IE)または シフト-Alt-V(Firefox)を使ってください。
  
In WP version 3.3.1 the correct toggle command for IE and Firefox is Shift-Alt-Z.
+
WordPress バージョン 3.3.1 では、IE と Firefox 用の正しい切り替えコマンドは シフト-Alt-Z です。
  
<div id="Adding Buttons">
+
<div id="Adding_Buttons">
 
== ボタンの追加 ==
 
== ボタンの追加 ==
 
</div>
 
</div>
  
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 の 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]] も見てください。
  
A detailed tutorial is also available on [http://wp.tutsplus.com/tutorials/theme-development/guide-to-creating-your-own-wordpress-editor-buttons/ WP Tuts +]
+
詳細なチュートリアルが [http://wp.tutsplus.com/tutorials/theme-development/guide-to-creating-your-own-wordpress-editor-buttons/ WP Tuts +] にあります。
  
 
<div id="Advanced Editing Plugins">
 
<div id="Advanced Editing Plugins">
== 高度なプラグインの編集==
+
== 高度な編集用のプラグイン ==
 
</div>
 
</div>
  
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:
+
高度な編集用のツールバーボタンでは不充分だが独自ボタンの作成は避けたいなら、たぶん TinyMCE エディターの機能拡張用プラグインを探すとよいでしょう。例えば:
  
* [[TinyMCE Custom Buttons]] (WordPress Codex)
+
* [[TinyMCE Custom Buttons]] /[[:en:TinyMCE Custom Buttons|en]](WordPress Codex)
* [http://www.laptoptips.ca/projects/tinymce-advanced/ TinyMCE Advanced] (LaptopTips.ca)
+
* [http://www.laptoptips.ca/projects/tinymce-advanced/ TinyMCE Advanced](LaptopTips.ca)
  
You can find more in the [http://wordpress.org/extend/plugins/ WordPress Plugin Directory].
+
[http://wordpress.org/extend/plugins/ WordPress プラグインディレクトリー] から他のプラグインを探せます。
  
<div id="Automatic use of Paragraph Tags">
+
<div id="Automatic_use_of_Paragraph_Tags">
 
== 段落タグを自動的に使用する ==
 
== 段落タグを自動的に使用する ==
 
</div>
 
</div>
  
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. 
+
WordPress と TinyMCE WYSIWYG エディターはデフォルトの場合、改行位置に段落タグ(P タグまたは <tt>&lt;p&gt;</tt>)を自動的に追加します。このデフォルト機能は、使い始めたばかりのユーザーが標準のコーディング規約に従うのを助けるためにインストールされています。
  
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.
+
上級ユーザーの多くにとっては、段落タグが追加する余分な行間がサイト全体のデザインの邪魔になるときがあります。そのような場合には P タグの自動使用や特定条件での使用を停止する機能が必要です。
  
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.
+
P タグを完全に無効にした場合、その代わりにテキストエディターで段落タグを手入力するのはユーザーの責任になります。
  
There are 3 primary options for removing P tags. These include:
+
P タグを削除するとき 3 つのオプションがあります。それは:
  
* Through out entire site
+
* サイト全体
* On specific Template pages
+
* 特定のテンプレートページ
* With specific page items
+
* 特定のページ項目
  
 
+
詳しくは下記を見てください。
Options Include:
+
  
 
* [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 プラグインディレクトリー] で見つかるかもしれません。
  
<div id="Customize TinyMCE with Filters">
+
<div id="Customize_TinyMCE_with_Filters">
 
== フィルターによる TinyMCE のカスタマイズ ==
 
== フィルターによる TinyMCE のカスタマイズ ==
 
</div>
 
</div>
  
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'''.
+
次のようなカスタマイズを行うために初期設定の配列をフィルター '''tiny_mce_before_init''' で変更できます。
 +
* エディターに表示されるボタンを変える
 +
* ビジュアルエディターのコンテンツにスタイルをつけるためにカスタム CSS ファイルを使う
 +
* TinyMCE に style や span などを削除させない
 +
* その他 TinyMCE のあらゆるところ
  
You can see the default settings in <tt>/wp-includes/class-wp-editor.php</tt>, here are some options.
+
デフォルト設定は <tt>/wp-includes/class-wp-editor.php</tt> で確認できます。以下はその一部です。
 
<pre>
 
<pre>
 
function my_format_TinyMCE( $in ) {
 
function my_format_TinyMCE( $in ) {
117行目: 119行目:
 
</pre>
 
</pre>
  
<div id="Change Log">
+
<div id="Change_Log">
== 更新履歴 ==
+
== 変更履歴 ==
 
</div>
 
</div>
 
  
 
* [[Version 4.0|WordPress 4.0]]: TinyMCE 4.1.3
 
* [[Version 4.0|WordPress 4.0]]: TinyMCE 4.1.3
136行目: 137行目:
 
* [[Writing Posts|記事を投稿する]]
 
* [[Writing Posts|記事を投稿する]]
 
* [[How WordPress Processes Post Content|WordPress の投稿データ処理]]
 
* [[How WordPress Processes Post Content|WordPress の投稿データ処理]]
* [[関数リファレンス/wp_editor|wp_editor]] (to render/print a TinyMCE editor)
+
* [[関数リファレンス/wp_editor|wp_editor]] (TinyMCE エディターのレンダリング/表示)
  
<div id="External Resources">
+
<div id="External_Resources">
 
== 外部リソース==
 
== 外部リソース==
 
</div>
 
</div>
150行目: 151行目:
 
{{TinyMCE API}}
 
{{TinyMCE API}}
  
{{原文|TinyMCE|153126}}<!-- 2015-08-05T09:04:22‎ Nao 版 -->
+
{{原文|TinyMCE|153126}} <!-- 2015-08-05T09:04:22 Nao 版 -->
  
 
[[Category: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を作成するためのお手伝いをお願いします。