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

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

「TinyMCE」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
({{NeedTrans}}・原文リンク追加、カテゴリー翻訳)
(見出しの訳)
3行目: 3行目:
 
WordPress is bundled with the open source HTML WYSIWYG editor [http://www.tinymce.com TinyMCE] by [http://moxiecode.com Moxiecode Systems, AB].
 
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">
 
== TinyMCE 4 ==
 
== TinyMCE 4 ==
 +
</div>
 +
 
WordPress 3.9 was released with a major update to TinyMCE version 4.0 in WordPress core. TinyMCE version 4 provides many changes:
 
WordPress 3.9 was released with a major update to TinyMCE version 4.0 in WordPress core. TinyMCE version 4 provides many changes:
 
* New UI and UI API.
 
* New UI and UI API.
14行目: 17行目:
 
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.
 
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.
  
== TinyMCE Plugins ==
+
<div id="TinyMCE Plugins">
 +
== TinyMCE プラグイン ==
 +
</div>
 +
 
 
Generally, there are three groups of TinyMCE plugins added by WordPress plugins:
 
Generally, there are three groups of TinyMCE plugins added by WordPress plugins:
  
21行目: 27行目:
 
* 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.
 
* 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.
  
== Advanced Editing Buttons ==
+
<div id="Advanced Editing Buttons">
 +
== 高度なボタンの編集 ==
 +
</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.
 
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.
31行目: 39行目:
 
In WP version 3.3.1 the correct toggle command for IE and Firefox is Shift-Alt-Z.
 
In WP version 3.3.1 the correct toggle command for IE and Firefox is Shift-Alt-Z.
  
== Adding Buttons ==
+
<div id="Adding Buttons">
 +
== ボタンの追加 ==
 +
</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.
 
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.
37行目: 47行目:
 
A detailed tutorial is also available on [http://wp.tutsplus.com/tutorials/theme-development/guide-to-creating-your-own-wordpress-editor-buttons/ WP Tuts +]
 
A detailed tutorial is also available on [http://wp.tutsplus.com/tutorials/theme-development/guide-to-creating-your-own-wordpress-editor-buttons/ WP Tuts +]
  
== Advanced Editing Plugins ==
+
<div id="Advanced Editing Plugins">
 +
== 高度なプラグインの編集==
 +
</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:
 
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:
46行目: 58行目:
 
You can find more in the [http://wordpress.org/extend/plugins/ WordPress Plugin Directory].
 
You can find more in the [http://wordpress.org/extend/plugins/ WordPress Plugin Directory].
  
== Automatic use of Paragraph Tags ==
+
<div id="Automatic use of Paragraph Tags">
 +
== 段落タグを自動的に使用する ==
 +
</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.   
 
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.   
  
66行目: 81行目:
 
You may also find plugins to assist with this at [http://wordpress.org/extend/plugins/ WordPress Plugins]
 
You may also find plugins to assist with this at [http://wordpress.org/extend/plugins/ WordPress Plugins]
  
== Customize TinyMCE with Filters ==
+
<div id="Customize TinyMCE with Filters">
 +
== フィルターによる TinyMCE のカスタマイズ ==
 +
</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'''.
 
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'''.
  
97行目: 115行目:
 
</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
107行目: 128行目:
 
* [[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]]  (to render/print a TinyMCE editor)
  
== 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}}
  

2015年8月10日 (月) 09:56時点における版

このページ「TinyMCE」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

WordPress is bundled with the open source HTML WYSIWYG editor TinyMCE by Moxiecode Systems, AB.

WordPress 3.9 was released with a major update to TinyMCE version 4.0 in WordPress core. TinyMCE version 4 provides many changes:

  • 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 slideshow and changelog which highlights many of the new features.

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 3.x to 4.0 migration guide and the 4.0 API documentation.
  • 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.
  • 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.

高度なボタンの編集

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.

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.

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".

In WP version 3.3.1 the correct toggle command for IE and Firefox is Shift-Alt-Z.

ボタンの追加

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 Rich Text Editor Filters for more information.

A detailed tutorial is also available on WP Tuts +

高度なプラグインの編集

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:

You can find more in the WordPress Plugin Directory.

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

By default Wordpress & the TinyMCE WYSIWYG editor will automatically add paragraph tags ( P tags or <p> ) around line breaks. This default functionality was installed to assist new users in adhering to standard coding principles.

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.

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.

There are 3 primary options for removing P tags. These include:

  • Through out entire site
  • On specific Template pages
  • With specific page items


Options Include:

You may also find plugins to assist with this at WordPress Plugins

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

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.

You can see the default settings in /wp-includes/class-wp-editor.php, here are some options.

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