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”),并点击刷新。