以下是我使用的方法。我添加了一个类(通常.entry-content
) 当我在前端输出内容时,将其发送到后端的WP编辑器以及包装器元素。
style.css
.entry-content h2 {
color: purple;
}
/* etc ... */
我也在使用
add_editor_style()
要将我的主题的默认样式表加载到TinyMCE中,请执行以下操作:
function wpse_editor_styles() {
// Use our existing main stylesheet for TinyMCE too.
add_editor_style( \'style.css\' );
}
add_action( \'after_setup_theme\', \'wpse_editor_styles\' );
我使用
wpse_editor_styles_class()
函数,只需添加
.entry-content
分类到TinyMCE
<body>
要素
/**
* Add .entry-content to the body class of TinyMCE.
* @param array $settings TinyMCE settings.
* @return array TinyMCE settings.
*/
function wpse_editor_styles_class( $settings ) {
$settings[\'body_class\'] = \'entry-content\';
return $settings;
}
add_filter( \'tiny_mce_before_init\', \'wpse_editor_styles_class\' );
有时我发现有必要覆盖应用于的样式
.entry-content
WP编辑器内部。我使用Sass,我有一个专门用于此目的的部分。
// TinyMCE .wp-content overrides.
body#tinymce.wp-editor {
// Override Foundation\'s height: 100%; because WP Editor in 4.0+ won\'t scroll down all of the way otherwise.
height: auto !important;
&.entry-content {
margin: 16px;
}
}