0

I use TinyMCE advanced on my Wordpress website. My logged-in users have the ability to fill forms with WYSIWYG fields. I don't understand why some styles are not applied on those fields while it applied well on the admin area. Fields are set in up with ACF or formidable forms. In both case I have the same issue.

On the admin: enter image description here

On the frontend: enter image description here

There are many discussion about TinyMCE style and I did a lot of reseach, but I still don't understand why this happen.

Thanks in advance for your answers.

EDIT: Seems like editor.css is not loaded in the frontend, I forced the loading of this css using this piece of code

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' );  

The result is better but nor perfect. Also for non admin user the icons disappears, here the result: enter image description here

Thanks for your help !

  • Looks like different CSS. Have you inspected the items in dev tools in your browser to see where the styles are coming from? – mozboz Jul 11 at 10:40
  • Thanks for your help. I followed your advice and seems like editor.css is not loaded in frontend. I haved added it using this piece of code <br/> code 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' ); It better but not perfect, also the icons of the editor disappear for non administrator users. I don't understand why. will update the post with a picture of the result. – Abdelkader kouhli Jul 11 at 12:32
0

The answer is simple: Styles from your theme are also applied to the TinyMCE editor. This is just how CSS works, and it means that the default styles that your theme applies to standard HTML will also apply to TinyMCE, as well as any HTML classes that the editor uses that also happen to be used by your theme.

The editor in your first screenshot is the editor loaded in the back-end of WordPress, so that's what it looks like when WordPress' admin styles are also applied to it. It's never going to look exactly the same as long as your theme is loading your own styles.

The only "solution" is to use the developer tools of your browser to inspect TinyMCE's elements and see what styles from your theme are applying to them, and then either remove them or overwrite them with styles that are closer to te WordPress admin's.

| improve this answer | |
0

Thanks @Jacob-peattie @mozboz, Indeed, we can just adapt the css to make it word on my twentyseventeen theme. I found a file called editor.css. I copy past a specific section on my style.css file (I m not sure if it's the best place as I have only 2 pages on 40 that have a WYSIWYG field).

I found weird that I have to write custom css for that, and I don't understand why my theme is "incompatible".

Thanks,

/* 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%;
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.