时间戳

首页 > 解决方案 > Wordpress - 如何为浅色和深色主题提供 2 种编辑器样式？ACF 专业版和 add_editor_styles()

wordpress - Wordpress - 如何为浅色和深色主题提供 2 种编辑器样式？ACF 专业版和 add_editor_styles()

问题描述

我目前正在为我的所见即所得编辑器使用 ACF PRO，并通过添加如下自定义样式表向编辑器添加了自定义样式：

add_action('admin_init', function () {
    add_editor_style(get_bloginfo('stylesheet_directory') . '/css/admin-wysiwyg.css');
});

我正在尝试找到一种方法来针对每个 acf 编辑器设置不同的样式。我想要一个浅色和深色的主题，所以一个编辑器是白色背景的，另一个是黑色背景的。

我试图在我的 css 中按其名称定位该字段，但不幸的是它超出了范围，因为样式表仅应用于编辑器的 iframe 上的内容。

.mceContentBody {
    background: white !important;
}

.acf-field-60b0e0f669990 .mceContentBody {
    background: black !important;
}

也试过：

*[data-name="treatment_content"] .mceContentBody {
    color: black !important;
}

我注意到 ACF 正在为 .mceContentBody 类上的微型 mce 编辑器添加一个数据属性。IE。数据 ID =“acf-editor-33”。但是，我在字段设置中看不到对字段 ID 的任何引用，并且由于我的编辑器位于转发器字段中，因此 ID 随着行的增加而增加，因此难以确保所有字段都是目标。

我也不确定是否可以将 add_editor_style() 添加到某些 ACF 字段？

例如：

add_action('admin_init', function () {
    
   /* If ACF field is tab_content */
    add_editor_style(get_bloginfo('stylesheet_directory') . '/css/admin-wysiwyg-light.css');
   /* else */
   add_editor_style(get_bloginfo('stylesheet_directory') . '/css/admin-wysiwyg-dark.css');
});

能够使用 ACF pro 以不同方式设置两个所见即所得编辑器的任何帮助都会非常有帮助。谢谢。

标签： wordpresseditoradvanced-custom-fieldswysiwyg

解决方案

推荐阅读