This topic contains 9 replies, has 2 voices, and was last updated by  Mahesh 2 years, 9 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #105632

    Ronald
    Participant

    I have created a gradulicious pro child theme. I am using the TinyMCE advanced editor.
    How can I see my style customizations also in the editor? Without having to add my styles to two files: the child theme style.css and the tinymce editor-styles.css?
    I have tried by importing the styles.css into editor-styles using the @import css statement but this does not work.
    What is the best way to do this?

    Ronald

    #105673

    Mahesh
    Keymaster

    @rvaalten: Have you checked Create CSS classes menu option in Editor Settings? If its disabled, add the following code in your child theme’s functions.php file and then check the option and see if this resolves the issue.
    add_theme_support('editor-style');

    Regards,
    Mahesh

    #105772

    Ronald
    Participant

    Ok, I did.
    But no difference. If I add a style to editor-style.css the style is shown in the editor but not in the frontend. If I add this style in style.css in my child theme, the style is visible in the frontend but not in the editor…
    What can I do next?
    Ronald

    #105793

    Mahesh
    Keymaster

    @rvaalten: Seems you need to enqueue editor-style.css in the child theme. Please add the following code in you child theme’s functions.php

    function wpdocs_theme_add_editor_styles() {
        add_editor_style( 'editor-style.css' );
    }
    add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

    Regards,
    Mahesh

    #105797

    Ronald
    Participant

    Hi Mahesh,

    Unfortunately it still does not work. By adding this function, if I understand correctly, css added to editor-style.css should also be available to the frontend? It doesn’t.
    The editor-style.css is in the parent theme css folder, not in the child theme’s folder. Is this relevant?

    Strange that this is not a standard feature of a PRO theme. Having a wysiwyg editor seams to me a common feature!

    Regards, Ronald

    #105798

    Mahesh
    Keymaster

    @rvaalten: I tested the same with the plugin on our server and the style did show up in both editor and the frontend. Please contact the plugin support.

    Regards,
    Mahesh

    #105808

    Ronald
    Participant

    Which plugin do you use on your server?
    Ronald

    #105897

    Mahesh
    Keymaster

    @rvaalten: I used the following plugin.
    https://wordpress.org/plugins/tinymce-advanced/

    Regards,
    Mahesh

    #105953

    Ronald
    Participant

    HI Mahesh, I use the same plugin: tinymce-advanced.
    Strange that this does not work on my site.

    Here’s functions.php in my child theme:

    /**
     * Loading Parent theme stylesheet
     *
     */
    add_action( 'wp_enqueue_scripts', 'gridalicious_child_enqueue_styles' );
    
    function gridalicious_child_enqueue_styles() {
        wp_enqueue_style( 'gridalicious-parent-style', get_template_directory_uri() . '/style.css' );
    }
    
    add_theme_support('editor-style');
    
    function wpdocs_theme_add_editor_styles() {
        add_editor_style( 'editor-style.css' );
    }
    add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
    #105979

    Mahesh
    Keymaster

    @rvaalten: I haven’t even put any additional codes in the child theme and the plugin is working fine. Style is being displayed in both editor and frontend.

    Regards,
    Mahesh

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘child theme styles in tinymce advanced editor’ is closed to new replies.