Function Reference/add editor style

来自WordPress中文文档
跳转至: 导航搜索

Description

Allows theme developers to link a custom stylesheet file to the TinyMCE visual editor. The function test the existence of the relative path(s) given as the $stylesheet argument, or of editor-style.css if no argument is specified, against the current theme directory and links the file(s) on success. If a child theme is used, both the current child and parent theme directories are tested and both the files with the same relative path are linked with this single call if they are found.

To link a stylesheet file from a location other than the current theme directory, such as under your plugin directory, use a filter attached to the mce_css hook instead.

Note that the behavior of this function with respect to child themes was changed in Version 3.4 and changed back in Version 3.5, see the Notes section below.

Usage

%%% <?php add_editor_style( $stylesheet ); ?> %%%

Parameters

tt$stylesheet/tt
(array/string) (optional) Path to a stylesheet file, relative to the current theme directory, or an array thereof to link multiple stylesheet files. If a child theme is used, both the current child and parent theme directories are considered, see the Description section above.
Default: "editor-style.css"noinclude

div class=template-description style=padding: 0 1.5em; border: 1px solid #eeeeee; background-color: #f9f9f9

Notes

This template is for standardizing how parameters look in the Function Reference and in Template Tags. Here is an example of this template being called: prenowiki检查到模板循环:模板:Parameter/nowiki/pre 检查到模板循环:模板:Parameter

The usage of this template is below: prenowiki检查到模板循环:模板:Parameter/nowiki/pre Let's take a closer look at the parameters..

name
The name of the parameter.
datatype
The datatype that should be given for this parameter when called.
  • string
  • integer
  • boolean
  • mixed
description
A short description of the parameter.
importance
Set this parameter to optional if the parameter is optional. Otherwise, do not declare this parameter—it defaults to required.
  • required
  • optional
default
If this parameter is optional, ttdefault/tt is the value that will be used if the parameter is not declared.

wordpress.org.cn /div /noinclude

Return Values

tt/tt
tt style=color:gray@return/tt (void) tt style=color:blue/tt: This function does not return a value.noinclude

div class=template-description style=padding: 0 1.5em; border: 1px solid #eeeeee; background-color: #f9f9f9

Description

This template is for standardizing how return values look in the Function Reference and in Template Tags.

Parameters

(1|param|param)
Return param or value (also can be: null, void...).
(2|datatype|datatype)
Datatype of return value.
(3|description|description)
Description of return value.

Usage

prenowiki检查到模板循环:模板:Return/nowiki/pre

Example

prenowiki检查到模板循环:模板:Return/nowiki/pre

Output

检查到模板循环:模板:Return /div /noinclude

Examples

Basic Usage

Add the following to the functions.php file of your theme.

<?php
function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );
?>

Next, create a file named custom-editor-style.css directly under your theme directory. Any CSS rules added to that file will be reflected within the TinyMCE visual editor. The contents of the file might look like this:

body#tinymce.wp-editor { 
    font-family: Arial, Helvetica, sans-serif; 
    margin: 10px; 
}

body#tinymce.wp-editor a {
    color: #4CA6CF;
}

Reusing Your Theme Styles

You can reuse the styles from your theme stylesheet file in your custom editor stylesheet file using the @import CSS rule. Working on the previous example, put the following instead into the custom-editor-style.css file.

@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; } 

If necessary, change 'style.css' to the path to your theme stylesheet, relative to the custom-editor-style.css file.

Choosing Styles Based on Post Type

To link a custom editor stylesheet file based on the post type being edited, you can use the following in the functions.php file of your theme. This assumes the stylesheet files with names in the form of editor-style-{post_type}.css are present directly under your theme directory.

<?php
function my_theme_add_editor_styles() {
    global $post;
    $post_type = get_post_type( $post->ID );
    $editor_style = 'editor-style-' . $post_type . '.css';
    add_editor_style( $editor_style );
}
add_action( 'pre_get_posts', 'my_theme_add_editor_styles' );
?>

Note that the pre_get_posts action hook is used to ensure that the post type is already determined but, at the same time, that TinyMCE has not been configured yet.

Notes

  • As of Version 3.4, WordPress will link the stylesheet file only if its path determined by the $stylesheet argument passes the file_exists() test, so arguments like "editor.css?version=1.0" will not work. Prior to Version 3.4, this will apply only to child themes.
  • In Version 3.4, using this function by a child theme to add a stylesheet file will not link the file if a stylesheet file on the same relative path was already added by a parent theme. As of Version 3.5, this was fixed and WordPress will look for the file in both the parent and child theme directories, as was the case before Version 3.4. See the ticket #21026 for details about these changes.

Change Log

Source File

add_editor_style() is located in onlyincludecodewp-includes/theme.php/code/onlyinclude

div class=template-description style=padding: 0 1.5em; border: 1px solid #eeeeee; background-color: #f9f9f9

Template Description

Link to the source code on http://core.trac.wordpress.org/browser/.

Parameters

  1. filename
  2. (option) path to codetag/code (version) or codetrunk/code. This option is only used for a new function.br /Default: codetrunk/code -- trunk is the latest bleeding edge development version of WordPress.

Usage

Link to the stable version: pre检查到模板循环:模板:Trac/pre

Link to trunk: pre检查到模板循环:模板:Trac/pre

/div

wordpress.org.cn.

References

Resources

Related

模板:Theme Support

Filters: mce_spellchecker_languages, mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4, mce_css, mce_external_plugins, mce_external_languages, tiny_mce_before_init

includeonlydiv style=clear:both; background-color:#F7F7F7; border:1px solid #CCCCCC; color:#000000; padding:7px; margin:0.5em auto 0.5em auto; vertical-align:middle;See also index of Function Reference and index of Template Tags./div/includeonlynoinclude

Description

This Template is used by Codex:Template Messages.

Usage

pre 检查到模板循环:模板:Message /pre

Result

检查到模板循环:模板:Message

/noinclude