将带有类的包装添加到所见即所得编辑器

时间:2017-07-31 作者:Stephen Sabatini

在我们的样板中,我们针对网站前端的所有所见即所得内容.typography 中的类typography.scss 并使用Gulp编译它。我们希望避免生成另一个文件,因为我们所有的排版样式都已在中定义typography.scss 和正在输出到editor-style.css 适当地,如果我们不需要,那么拥有两个文件是没有意义的。为了不产生另一个文件,我们需要添加一个.typography 类中的WYSIWYG,以便它应用于管理。关于如何以适当的方式做到这一点,有什么想法吗?我们不想更改CSS,因为它基于前端用于Drupal和BigtreeCM的样板文件,并且希望避免在多个位置更新样板文件(如果可能的话)。如果这不可能,我们将按需要做。再次感谢各位抽出时间。

1 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

以下是我使用的方法。我添加了一个类(通常.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;
    }
}

结束

相关推荐

将按钮添加到TinyMCE自定义菜单

我在TinyMCE可视化编辑器中添加了一个带有菜单的新按钮,使用它非常有用tutorial 但现在想添加更多的项目,这取决于我的主题中是否有各种帖子类型。我认为我使用addMenuItem和“context”的方法是正确的,但我不知道如何按正确的顺序设置它。我的插件代码:add_action(\'admin_head\', \'nto_add_shortcode_button\'); function nto_add_shortcode_button() { global