使用ADD_EDITOR_STYLE()时TinyMCE和Gutenberg的不同CSS规则

时间:2019-03-15 作者:Cerere

我想在古腾堡编辑器中加入一些CSS规则(以更好地反映网站前端的方式)。然而,我绝对不希望看到在后端的任何Tinymce实例中应用相同的样式。我找到了一个简单的CSS解决方案,我想与大家分享!

2 个回复
最合适的回答,由SO网友:Cerere 整理而成

SHORT VERSION

使用css可以使用:not() 用于排除Tinymce实例的选择器,例如。body:not(.mce-content-body) {...}

LONG VERSION

假设我们已经声明了对编辑器样式的主题支持,并在主题(例如functions.php)的某处包含了一个编辑器样式表,如下所示:

add_theme_support( \'editor-styles\' );
add_editor_style( \'something/something/css/editor.css\' );
为了这个例子,我希望我们的古腾堡背景是黑色的。编辑器内部。css我们可以声明:

body { background-color: #000 }
现在,我们的gutenberg背景是黑色的,但这同样适用于整个站点的任何Tinymce实例。幸运的是,Tinymce实例包装在iframe中,并或多或少具有以下标记:

<iframe>
<html>
<head>
</head>
<body id="tinymce" class="mce-content-body acf_content post-type-page post-status-publish ...">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>
</iframe>
由于body标记有几个方便的类,我们可以返回编辑器。css并将先前声明的正文语句更改为:

body:not(.mce-content-body) { background-color: #000 }
现在我的gutenberg编辑器背景回来了,而Tinymce的任何实例都保留默认背景。在本例中:not(X) 选择器将所需的背景色应用于任何正文标记,具有.mce-contnet-body 班在这一点上,我们甚至可以决定更加具体和有针对性.post-type-page 仅为我们的页面添加样式,或.acf_content 只对高级自定义字段插件创建的Tinymce实例应用一些规则。

此外,如果您使用的是Less/Scss,您可以构建您的网站主样式表,以便您的“screen.Scss”和“editor.Scss”或多或少共享相同的@imports和@includes,减少重复,并允许在“scren.css”和“editor.Scss”之间共享应用于一个或多个属性的更改。

最后-有时对编辑器进行更改。css文件可能不会在Tinymce up中显示/显示,因为样式表是缓存的。在开发这种情况时,打开一个指向编辑器的选项卡可能会有所帮助。css文件(例如:“wp内容/主题/主题名/资产/css/编辑器.css”),并点击刷新。

SO网友:Azragh

您还可以加载两个不同的样式表。如果省略add_theme_support(\'editor_stlyes\'), 您的样式表来自add_editor_style() 仅适用于TinyMCE。然后将古腾堡样式表与enqueue_block_editor_assets(). 这些样式只需加前缀.editor-styles-wrapper 更详细的说明(使用时自动完成add_editor_style()). 因此,如果您使用单独的SCSS文件,这是一种能够同时使用两个编辑器并在需要时分别进行调整的好方法。

我在搜索解决方案以获取HTML块预览以使用此方法时发现了这一点。不幸的是,当不使用add_editor_style(), 我只想提一下。