tiny_mce_before_init
云策文档标注
概述
tiny_mce_before_init 是一个 WordPress 过滤器钩子，用于在 TinyMCE 编辑器初始化前修改其配置数组。它允许开发者自定义编辑器的行为和样式设置。
关键要点
- 过滤器钩子名称：tiny_mce_before_init
- 参数：$mce_init（TinyMCE 配置数组）和 $editor_id（编辑器唯一标识符，如 'content' 或 'classic-block'）
- 用途：通过 apply_filters 调用，可添加或修改 TinyMCE 设置，例如自定义样式选项
- 版本历史：WordPress 2.5.0 引入，3.3.0 添加 $editor_id 参数
- 相关函数：wp_tinymce_inline_scripts() 和 _WP_Editors::editor_settings() 使用此钩子
代码示例
function mytheme_tinymce_settings( $settings ) {
//First, we define the styles we want to add in format 'Style Name' => 'css classes'
$classes = array(
__('Test style 1', 'mytheme') => 'teststyle1',
__('Test style 2', 'mytheme') => 'teststyle2',
__('Test style 3', 'mytheme') => 'teststyle3',
);
//Delimit styles by semicolon in format 'Title=classes;' so TinyMCE can use it
if ( ! empty( $settings['theme_advanced_styles'] ) ) {
$settings['theme_advanced_styles'] .= ';';
} else {
//If there's nothing defined yet, define it
$settings['theme_advanced_styles'] = '';
}
//Loop through our newly defined classes and add them to TinyMCE
$class_settings = '';
foreach ( $classes as $name => $value ) {
$class_settings .= "{$name}={$value};";
}
//Add our new class settings to the TinyMCE $settings array
$settings['theme_advanced_styles'] .= trim( $class_settings, '; ' );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'mytheme_tinymce_settings' );注意事项
- 默认情况下，WordPress 隐藏了样式下拉菜单，需使用 mce_buttons_2 过滤器显示，并通过 mce_css 钩子加载 CSS
- 示例代码演示了如何添加自定义样式到 theme_advanced_styles 设置中
原文内容
Filters the TinyMCE config before init.
Parameters
$mce_initarray-
An array with TinyMCE config.
$editor_idstring-
Unique editor identifier, e.g.
'content'. Accepts'classic-block'when called from block editor’s Classic block.
Source
$mce_init = apply_filters( 'tiny_mce_before_init', $mce_init, $editor_id );
Skip to note 2 content
Steven Lin
Example migrated from Codex:
The following example adds custom style options to an existing Style dropdown.
Note that, by default, the Style dropdown is hidden in WordPress. To show this option, you will need to add it using the mce_buttons_2 filter and load the CSS using the mce_css hook.
function mytheme_tinymce_settings( $settings ) { //First, we define the styles we want to add in format 'Style Name' => 'css classes' $classes = array( __('Test style 1', 'mytheme') => 'teststyle1', __('Test style 2', 'mytheme') => 'teststyle2', __('Test style 3', 'mytheme') => 'teststyle3', ); //Delimit styles by semicolon in format 'Title=classes;' so TinyMCE can use it if ( ! empty( $settings['theme_advanced_styles'] ) ) { $settings['theme_advanced_styles'] .= ';'; } else { //If there's nothing defined yet, define it $settings['theme_advanced_styles'] = ''; } //Loop through our newly defined classes and add them to TinyMCE $class_settings = ''; foreach ( $classes as $name => $value ) { $class_settings .= "{$name}={$value};"; } //Add our new class settings to the TinyMCE $settings array $settings['theme_advanced_styles'] .= trim( $class_settings, '; ' ); return $settings; } add_filter( 'tiny_mce_before_init', 'mytheme_tinymce_settings' );