WordPress函数add_editor_style()

WordPress函数add_editor_style(),为自定义TinyMCE编辑器样式表添加回调。

用法:

add_editor_style( array|string $stylesheet = ‘editor-style.css’ )

描述:

参数$stylesheet是样式表的名称,相对于主题根目录,它还接受一个样式表数组,它是可选的,默认为’ editor .css ‘。

这个函数会自动添加另一个带-rtl前缀的样式表,例如editor-style-rtl.css,如果该文件不存在,则在向TinyMCE添加样式表之前将其删除,如果一个样式表数组被传递给add_editor_style(), RTL只会被添加到第一个样式表。

从3.4版开始,TinyMCE主体就有了,rtl CSS类,更好的选择是使用这个类并在主样式表中添加任何RTL样式。

参数:

$stylesheet

(array|string) (可选)样式表名称或其数组,相对于主题根,默认为“editor-style.css”

默认值:“editor-style.css”

更多的信息:

允许主题开发人员将自定义样式表文件链接到TinyMCE可视化编辑器,该函数针对当前主题目录测试作为$stylesheet参数给出的相对路径是否存在,并在成功时链接文件,如果没有指定$stylesheet参数,该函数将测试默认编辑器样式表文件是否存在,css文件,并在成功时链接该文件。

如果使用了子主题,则测试当前子主题和父主题目录,如果找到了具有相同相对路径的两个文件,则将它们链接到这个调用中。

要从当前主题目录以外的位置链接样式表文件,比如在你的插件目录下,可以使用附加到mce_css钩子的过滤器。

来源:

文件: 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 );

}

更新日志:

WordPress函数add_editor_style() (https://www.wpzt.net/) WordPress开发教程 第1张

用户贡献的笔记:

(由Codex – 5年前贡献)

基本的例子

将以下内容添加到主题的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’ );

接下来,在您的主题根目录中创建一个名为custom-editor-style.css的文件,添加到该文件中的任何CSS规则都将反映在TinyMCE可视化编辑器中,文件的内容可能如下所示:

body#tinymce.wp-editor {

font-family: Arial, Helvetica, sans-serif;

margin: 10px;

}

body#tinymce.wp-editor a {

color: #4CA6CF;

}

(由majick贡献- 5年前)

如果你想动态地添加样式(例如,你可以使用tiny_mce_before_init过滤器,并将它们添加到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;

}

注意,任何新行或双引号都应该在CSS中删除或双转义。

(由Codex – 5年前贡献)

使用谷歌字体

谷歌字体API为CSS文件提供了一个单一的URL,该URL可以包含一个字体面的多个变体,用逗号分隔,URL中的逗号需要进行编码,然后才能将字符串传递给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年前贡献)

根据帖子类型选择样式

要链接基于正在编辑的帖子类型的自定义编辑器样式表文件,可以在主题的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操作钩子用于确保已经确定了post类型,但同时,TinyMCE还没有配置,这个钩子在创建新的post时不会运行,这就是为什么我们需要将它与init钩子结合使用来实现一致的结果。

(由布拉德·戴维斯贡献- 3年前)

如果你将你的样式文件保存在一个子目录中,例如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年前贡献)

上面的例子可以改写得更简单:

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年前贡献)

重用主题样式

您可以使用@import CSS规则在自定义编辑器样式表文件中重用主题样式表文件中的样式,处理前面的示例,将下列内容放入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; }

如有必要,改变“风格”,到你的主题样式表的路径,相对于custom-editor style.css文件。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注