将main style.css与ADD_EDITOR_STYLE配合使用

时间：2017-09-13 作者：epsilon42

我在线阅读的所有资源都建议使用不同的CSS文件（即。editor-style.css) 为了使所见即所得编辑器的样式更接近实际内容的外观。

为了测试，我试着只使用mainstyle.css 我在网站其余部分使用的文件和所见即所得编辑器中的样式看起来很棒，到目前为止，我还没有注意到这样做有任何问题。

我还应该创建一个新的editor-style.css 使用这个，或者使用我的mainstyle.css?

以下是我使用的代码供参考：

function wysiwyg_styles() {
    add_editor_style( \'style.css\' );
}
add_action( \'init\', \'wysiwyg_styles\' );

3 个回复

最合适的回答,由SO网友:cybmeta 整理而成

最简单的答案是：可以为编辑器使用任何样式表。editor-style.css 如果没有传递给，则仅加载默认样式表add_editor_style().

这将加载指定的样式表：

add_editor_style( \'some-stylsheet.css\' );

这将加载编辑器样式。css：

add_editor_style();

使用更适合你需要的东西。

顺便说一下，更好的做法是使用after_setup_theme 行动，而不是init, 因为这是主题的特定内容：

add_action( \'after_setup_theme\', \'cyb_theme_setup\' );
fucntion cyb_theme_setup() {
    add_editor_style();
}

SO网友:Johansson

编辑器并没有使用网站前端使用的所有样式。所以，你不需要全部style.css 文件但是，文件仍由浏览器缓存，因此可能不会出现性能问题。

但如果你style.css 相当大。它可能会覆盖管理面板使用的其他样式。您可能已经注意到仪表板的整体外观有一些小的变化（可能，不一定）。在这种情况下，您可以编写一个小样式表，并且只包含在单个帖子和页面中使用的样式。

SO网友:Jacob Peattie

没有理由你不能这样做，但你需要考虑以下几点：

首先，您正在加载大量与编辑器所表示的内容无关的样式。

需要考虑的另一件事是，TinyMCE内容没有包装在entry 类或类似类，因此主题的前端需要使用基h1,p,ul 样式等没有任何额外的特殊性，或者编辑器中的内容实际上与前端不匹配。出于这个原因，我特意构建主题，以便编辑器所表示的内容使用基本样式。

在开发主题时，我使用的也更少，所以我将CSS的各个部分分解成单独的文件，如base.less, entry.less, widget.less. 然后我有两个主要的LESS文件用于前端和编辑器，它们只导入所需的位。所以style.less 可能看起来像：

@import (reference) \'variables\';
@import \'base/normalize\';
@import \'base/html\';
@import \'base/forms\';
@import \'base/media\';
@import \'components/grid\';
@import \'components/header\'
@import \'components/sidebar\';
@import \'components/navbar\';
@import \'components/footer\';

而editor-style.less 看起来像：

@import (reference) \'variables\';
@import \'base/normalize\';
@import \'base/html\';
@import \'base/forms\';
@import \'base/media\';

那么style.less 编译为style.css 和editor-style.less 编译为editor-style.css.

因此，我只编写了一组样式，但只将需要的部分放入edtior样式表中。

结束

小码农CODE

将main style.css与ADD_EDITOR_STYLE配合使用

相关推荐

在tinymce编辑器上重置撤消