WordPress函數(shù)add_editor_style()
WordPress函數(shù)add_editor_style()，為自定義TinyMCE編輯器樣式表添加回調(diào)。
用法：
add_editor_style( array|string $stylesheet = 'editor-style.css' )
描述：
參數(shù)$stylesheet是樣式表的名稱(chēng)，相對(duì)于主題根目錄。它還接受一個(gè)樣式表數(shù)組。它是可選的，默認(rèn)為' editor .css '。
這個(gè)函數(shù)會(huì)自動(dòng)添加另一個(gè)帶-rtl前綴的樣式表，例如editor-style-rtl.css。如果該文件不存在，則在向TinyMCE添加樣式表之前將其刪除。如果一個(gè)樣式表數(shù)組被傳遞給add_editor_style()， RTL只會(huì)被添加到第一個(gè)樣式表。
從3.4版開(kāi)始，TinyMCE主體就有了。rtl CSS類(lèi)。更好的選擇是使用這個(gè)類(lèi)并在主樣式表中添加任何RTL樣式。
參數(shù)：
$stylesheet
(array|string) (可選)樣式表名稱(chēng)或其數(shù)組，相對(duì)于主題根。默認(rèn)為“editor-style.css”
默認(rèn)值:“editor-style.css”
更多的信息：
允許主題開(kāi)發(fā)人員將自定義樣式表文件鏈接到TinyMCE可視化編輯器。該函數(shù)針對(duì)當(dāng)前主題目錄測(cè)試作為$stylesheet參數(shù)給出的相對(duì)路徑是否存在，并在成功時(shí)鏈接文件。如果沒(méi)有指定$stylesheet參數(shù)，該函數(shù)將測(cè)試默認(rèn)編輯器樣式表文件是否存在。css文件，并在成功時(shí)鏈接該文件。
如果使用了子主題，則測(cè)試當(dāng)前子主題和父主題目錄，如果找到了具有相同相對(duì)路徑的兩個(gè)文件，則將它們鏈接到這個(gè)調(diào)用中。
要從當(dāng)前主題目錄以外的位置鏈接樣式表文件，比如在你的插件目錄下，可以使用附加到mce_css鉤子的過(guò)濾器。
來(lái)源：
文件: wp-includes/theme.php
function add_editor_style( $stylesheet = 'editor-style.css' ) {
global $editor_styles;
add_theme_support( 'editor-style' );
$editor_styles = (array) $editor_styles;
$stylesheet = (array) $stylesheet;
if ( is_rtl() ) {
$rtl_stylesheet = str_replace( '.css', '-rtl.css', $stylesheet[0] );
$stylesheet[] = $rtl_stylesheet;
}
$editor_styles = array_merge( $editor_styles, $stylesheet );
}
更新日志：
用戶貢獻(xiàn)的筆記：
（由Codex - 5年前貢獻(xiàn)）
基本的例子
將以下內(nèi)容添加到主題的functions.php文件中。
/**
* Registers an editor stylesheet for the theme.
*/
function wpdocs_theme_add_editor_styles() {
add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
接下來(lái)，在您的主題根目錄中創(chuàng)建一個(gè)名為custom-editor-style.css的文件。添加到該文件中的任何CSS規(guī)則都將反映在TinyMCE可視化編輯器中。文件的內(nèi)容可能如下所示:
body#tinymce.wp-editor {
font-family: Arial, Helvetica, sans-serif;
margin: 10px;
}
body#tinymce.wp-editor a {
color: #4CA6CF;
}
（由majick貢獻(xiàn)- 5年前）
如果你想動(dòng)態(tài)地添加樣式(例如。你可以使用tiny_mce_before_init過(guò)濾器，并將它們添加到content_style鍵。
add_filter('tiny_mce_before_init','wpdocs_theme_editor_dynamic_styles');
function wpdocs_theme_editor_dynamic_styles( $mceInit ) {
$styles = 'body.mce-content-body { background-color: #' . get_theme_mod( 'background-color', '#FFF' ) . '}';
if ( isset( $mceInit['content_style'] ) ) {
$mceInit['content_style'] .= ' ' . $styles . ' ';
} else {
$mceInit['content_style'] = $styles . ' ';
}
return $mceInit;
}
注意，任何新行或雙引號(hào)都應(yīng)該在CSS中刪除或雙轉(zhuǎn)義。
（由Codex - 5年前貢獻(xiàn)）
使用谷歌字體
谷歌字體API為CSS文件提供了一個(gè)單一的URL，該URL可以包含一個(gè)字體面的多個(gè)變體，用逗號(hào)分隔。URL中的逗號(hào)需要進(jìn)行編碼，然后才能將字符串傳遞給add_editor_style。
/**
* Registers an editor stylesheet for the current theme.
*/
function wpdocs_theme_add_editor_styles() {
$font_url = str_replace( ',', '%2C', '//fonts.googleapis.com/css?family=Lato:300,400,700' );
add_editor_style( $font_url );
}
add_action( 'after_setup_theme', 'wpdocs_theme_add_editor_styles' );
（由Codex - 5年前貢獻(xiàn)）
根據(jù)帖子類(lèi)型選擇樣式
要鏈接基于正在編輯的帖子類(lèi)型的自定義編輯器樣式表文件，可以在主題的functions.php文件中使用以下方法。這假定以editor-style-{post_type}.css形式命名的樣式表文件直接存在于主題目錄下。
/**
* Registers an editor stylesheet for the current theme.
*
* @global WP_Post $post Global post object.
*/
function wpdocs_theme_add_editor_styles() {
global $post;
$my_post_type = 'posttype';
// New post (init hook).
if ( false !== stristr( $_SERVER['REQUEST_URI'], 'post-new.php' )
&& ( isset( $_GET['post_type'] ) === true && $my_post_type == $_GET['post_type'] )
) {
add_editor_style( get_stylesheet_directory_uri() . '/css/editor-style-' . $my_post_type . '.css' );
}
// Edit post (pre_get_posts hook).
if ( stristr( $_SERVER['REQUEST_URI'], 'post.php' ) !== false
&& is_object( $post )
&& $my_post_type == get_post_type( $post->ID )
) {
add_editor_style( get_stylesheet_directory_uri() . '/css/editor-style-' . $my_post_type . '.css' );
}
}
add_action( 'init', 'wpdocs_theme_add_editor_styles' );
add_action( 'pre_get_posts', 'wpdocs_theme_add_editor_styles' );
注意，pre_get_posts操作鉤子用于確保已經(jīng)確定了post類(lèi)型，但同時(shí)，TinyMCE還沒(méi)有配置。這個(gè)鉤子在創(chuàng)建新的post時(shí)不會(huì)運(yùn)行，這就是為什么我們需要將它與init鉤子結(jié)合使用來(lái)實(shí)現(xiàn)一致的結(jié)果。
（由布拉德·戴維斯貢獻(xiàn)- 3年前）
如果你將你的樣式文件保存在一個(gè)子目錄中，例如css，你可以添加編輯器樣式:
/**
* Registers an editor stylesheet in a sub-directory.
*/
function add_editor_styles_sub_dir() {
add_editor_style( trailingslashit( get_template_directory_uri() ) . 'css/editor-style.css' );
}
add_action( 'after_setup_theme', 'add_editor_styles_sub_dir' );
（由olik9 - 4年前貢獻(xiàn)）
上面的例子可以改寫(xiě)得更簡(jiǎn)單:
function value( $ar, $key, $default = '' ) {
if ( is_array( $ar ) && isset( $ar[ $key ] ) ) { return $ar[ $key ]; }
//else
return $default;
}
/**
* Registers an editor stylesheet for the current theme.
*
* @global WP_Post $post Global post object.
*/
function wpdocs_theme_add_editor_styles() {
global $pagenow;
global $post;
$my_post_type = 'posttype';
if ( ( ( 'post-new.php' === $pagenow ) && ( value( $_GET, 'post_type' ) == $my_post_type ) ) || // New post (init hook)
( ( 'post.php' === $pagenow ) && is_object( $post ) && ( get_post_type( $post->ID ) == $my_post_type ) ) ) { // Edit post (pre_get_posts hook).
add_editor_style( get_stylesheet_directory_uri() . '/css/editor-style-' . $my_post_type . '.css' );
}
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
add_action( 'pre_get_posts', 'wpdocs_theme_add_editor_styles' );
（由Codex - 5年前貢獻(xiàn)）
重用主題樣式
您可以使用@import CSS規(guī)則在自定義編輯器樣式表文件中重用主題樣式表文件中的樣式。處理前面的示例，將下列內(nèi)容放入custom-editor-style.css文件中。
@import url( 'style.css' );
/* Add overwrites as needed so that the content of the editor field is attractive and not broken */
body { padding: 0; background: #fff; }
如有必要，改變“風(fēng)格”。到你的主題樣式表的路徑，相對(duì)于custom-editor style.css文件。
