前端样式上的TinyMCE不起作用

时间:2020-07-11 作者:AKK

我在Wordpress网站上使用TinyMCE advanced。我的登录用户可以使用所见即所得字段填写表单。我不明白为什么有些样式在这些字段上没有应用,而在管理领域应用得很好。字段以ACF或强大的形式设置。在这两种情况下,我都有相同的问题。

在管理员上:enter image description here

在前端:enter image description here

关于TinyMCE风格有很多讨论,我做了很多研究,但我仍然不明白为什么会发生这种情况。

提前感谢您的回答。

编辑:看起来像编辑器。css没有加载到前端,我使用这段代码强制加载了这个css

function wpb_adding_styles() {
wp_register_style(\'my_stylesheet\',\'https://www.example.com/wp-includes/css/editor.min.css?ver=5.4.2\');
wp_enqueue_style(\'my_stylesheet\');
}
add_action( \'wp_enqueue_scripts\', \'wpb_adding_styles\' );  
结果更好,但也不完美。对于非管理员用户,图标也会消失,结果如下:enter image description here

谢谢你的帮助!

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

答案很简单:主题中的样式也应用于TinyMCE编辑器。这就是CSS的工作方式,这意味着主题应用于标准HTML的默认样式也将应用于TinyMCE,以及编辑器使用的任何HTML类,这些HTML类恰好也被主题使用。

第一个屏幕截图中的编辑器是加载在WordPress后端的编辑器,所以WordPress的管理风格也应用于它时,它就是这样的。只要你的主题是加载你自己的风格,它就永远不会看起来完全一样。

唯一的“;解决方案;就是使用浏览器的开发工具来检查TinyMCE的元素,并查看主题中的哪些样式应用于它们,然后删除它们或使用更接近WordPress管理员的样式覆盖它们。

SO网友:AKK

感谢Jacob peattie mozboz,事实上,我们可以调整css使其成为我的twentyseventeen 主题我找到一个名为editor.css. 我在我的style.css 文件(我不确定这是不是最好的地方,因为我只有2页40页上有WYSIWYG字段)。

我觉得很奇怪,我必须为此编写自定义css,我不明白为什么我的主题是;不兼容;。

谢谢

/* Editors */
.wp-editor-wrap {
    position: relative;
}

.wp-editor-tools {
    position: relative;
    z-index: 1;
}

.wp-editor-tools:after {
    clear: both;
    content: "";
    display: table;
}

.wp-editor-container {
    clear: both;
    border: 1px solid #e5e5e5;
}

.wp-editor-area {
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    padding: 10px;
    margin: 1px 0 0;
    line-height: 150%;
    border: 0;
    outline: none;
    display: block;
    resize: vertical;
    box-sizing: border-box;
}

.rtl .wp-editor-area {
    font-family: Tahoma, Monaco, monospace;
}

.locale-he-il .wp-editor-area {
    font-family: Arial, Monaco, monospace;
}

.wp-editor-container textarea.wp-editor-area {
    width: 100%;
    margin: 0;
    box-shadow: none;
}

.wp-editor-tabs {
    float: right;
}

.wp-switch-editor {
    float: left;
    box-sizing: content-box;
    position: relative;
    top: 1px;
    background: #ebebeb;
    color: #666;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.46153846;
    height: 20px;
    margin: 5px 0 0 5px;
    padding: 3px 8px 4px;
    border: 1px solid #e5e5e5;
}

.wp-switch-editor:focus {
    box-shadow:
        0 0 0 1px #5b9dd9,
        0 0 2px 1px rgba(30, 140, 190, 0.8);
    outline: none;
    color: #23282d;
}

.wp-switch-editor:active,
.html-active .switch-html:focus,
.tmce-active .switch-tmce:focus {
    box-shadow: none;
}

.wp-switch-editor:active {
    background-color: #f5f5f5;
    box-shadow: none;
}

.js .tmce-active .wp-editor-area {
    color: #fff;
}

.tmce-active .quicktags-toolbar {
    display: none;
}

.tmce-active .switch-tmce,
.html-active .switch-html {
    background: #f5f5f5;
    color: #555;
    border-bottom-color: #f5f5f5;
}

.wp-media-buttons {
    float: left;
}

.wp-media-buttons .button {
    margin-right: 5px;
    margin-bottom: 4px;
    padding-left: 7px;
    padding-right: 7px;
}

.wp-media-buttons .button:active {
    position: relative;
    top: 1px;
    margin-top: -1px;
    margin-bottom: 1px;
}

.wp-media-buttons .insert-media {
    padding-left: 5px;
}

.wp-media-buttons a {
    text-decoration: none;
    color: #444;
    font-size: 12px;
}

.wp-media-buttons img {
    padding: 0 4px;
    vertical-align: middle;
}

.wp-media-buttons span.wp-media-buttons-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 1;
    vertical-align: middle;
    margin: 0 2px;
}

.wp-media-buttons .add_media span.wp-media-buttons-icon {
    background: none;
}

.wp-media-buttons .add_media span.wp-media-buttons-icon:before {
    font: normal 18px/1 dashicons;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wp-media-buttons .add_media span.wp-media-buttons-icon:before {
    content: "\\f104";
}

.mce-content-body dl.wp-caption {
    max-width: 100%;
}