0

I have just read an article on how to implement custom styles to the Wordpress Tiny MCE.

To be honest I am a bit confused as to why we have to add arrays of styles to functions.php.

The problem I have is that the styles are applied as inline CSS (see the picture). This is a problem because it will render my CSS file useless, because if I change my style sheet at a later point, I will also have to edit all articles to edit the inline CSS accordingly. In other words, big

I know that I can just remove the array of styles e.g. remove 'borderLeftWidth' => '5px', and so on... but then I will not have a preview of the styles in the Tiny MCE. So the question is: instead of getting the styles from functions.php, how can I load the styles only from an external CSS file?

As you can see in the picture I get inline CSS when what I really want is external CSS As you can see in the picture I get inline CSS when what I really want is external CSS

Preferably I would like to control the styles with a CSS file.

I also know that there are a bunch of plugins that can do this out there, but I would like to keep this a part of the theme and not a plugin.

functions.php:

// Apply styles to the visual editor
add_filter('mce_css', 'tuts_mcekit_editor_style');
function tuts_mcekit_editor_style($url) {

    if ( !empty($url) )
    $url .= ',';

    // Retrieves the plugin directory URL
    // Change the path here if using different directories
    $url .= trailingslashit( plugin_dir_url(get_stylesheet_directory_uri()) ) . '/tinymce.min.css';
    return $url;
}

// Add "Styles" drop-down
add_filter( 'mce_buttons_2', 'tuts_mce_editor_buttons' );
function tuts_mce_editor_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

// Add styles/classes to the "Styles" drop-down
add_filter( 'tiny_mce_before_init', 'tuts_mce_before_init' );
function tuts_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Emphasis box',
            'block' => 'p',
            'classes' => 'emphasis-box',
            'styles' => array(
                'borderLeftWidth' => '5px',
                'borderLeftStyle' => 'solid',
                'borderLeftColor' => '#1a1a1a',
                'paddingTop' => '10px',
                'paddingRight' => '10px',
                'paddingBottom' => '10px',
                'paddingLeft' => '25px',
                'backgroundColor' => '#f9f9f9',
                'borderTopLeftRadius' => '0px',
                'borderTopRightRadius' => '5px',
                'borderBottomRightRadius' => '5px',
                'borderBottomLeftRadius' => '0px',
                'fontWeight' => '400',
                'fontSize' => '16px',
                'color' => '#000000'
                )
            ),
            array(
                'title' => 'Alert box blue',
                'block' => 'section',
                'classes' => 'alertbox blue',
                'wrapper' => true
                ),
            array(
                'title' => 'Alert box yellow',
                'block' => 'section',
                'classes' => 'alertbox yellow',
                'wrapper' => true
                ),
            array(
                'title' => 'Alert box red',
                'block' => 'section',
                'classes' => 'alertbox red',
                'wrapper' => true
                ),
            array(
                'title' => 'Alert box green',
                'block' => 'section',
                'classes' => 'alertbox green',
                'wrapper' => true
                ),
            array(
                'title' => 'Alert box pink',
                'block' => 'section',
                'classes' => 'alertbox pink',
                'wrapper' => true
                )

    );

    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}

// Learn TinyMCE style format options at http://www.tinymce.com/wiki.php/Configuration:formats
 // Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts'
add_action('wp_enqueue_scripts', 'tuts_mcekit_editor_enqueue');

// Enqueue stylesheet, if it exists.
function tuts_mcekit_editor_enqueue() {
  $StyleUrl = plugin_dir_url(get_stylesheet_directory_uri()).'tinymce.min.css'; // Customstyle.css is relative to the current file
  wp_enqueue_style( 'myCustomStyles', $StyleUrl );
}

tinymce.min.css:

.emphasis-box {
    border-left: 5px solid #1a1a1a;
    padding: 10px 10px 10px 25px;
    background-color: #f9f9f9;
    border-radius: 0px 5px 5px 0px;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
}
2

The path to the CSS file tinymce.min.css was incorrect. The solution was to change:

$url .= trailingslashit( plugin_dir_url(get_stylesheet_directory_uri()) ) . '/tinymce.min.css';

to:

$StyleUrl = get_stylesheet_directory_uri().'/style-sheets/tinymce.min.css';

I also had to change:

$StyleUrl = plugin_dir_url(get_stylesheet_directory_uri()).'tinymce.min.css';

to:

$StyleUrl = get_stylesheet_directory_uri().'/style-sheets/tinymce.min.css';

Now all I had to do was to remove the styles array so the complete code is:

// Apply styles to the visual editor
add_filter('mce_css', 'tuts_mcekit_editor_style');
function tuts_mcekit_editor_style($url) {

    if ( !empty($url) )
    $url .= ',';

    // Retrieves the plugin directory URL
    // Change the path here if using different directories
    $url .= trailingslashit( get_stylesheet_directory_uri() ) . 'style-sheets/tinymce.min.css';
    return $url;
}

// Add "Styles" drop-down
add_filter( 'mce_buttons_2', 'tuts_mce_editor_buttons' );
function tuts_mce_editor_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

// Add styles/classes to the "Styles" drop-down
add_filter( 'tiny_mce_before_init', 'tuts_mce_before_init' );
function tuts_mce_before_init( $settings ) {

    $style_formats = array(
    array(
        'title' => 'Emphasis box',
        'block' => 'p',
        'classes' => 'emphasis-box'
        ),
    array(
        'title' => 'Alert box blue',
        'block' => 'section',
        'classes' => 'alertbox blue',
        'wrapper' => true
        ),
    array(
        'title' => 'Alert box yellow',
        'block' => 'section',
        'classes' => 'alertbox yellow',
        'wrapper' => true
        ),
    array(
        'title' => 'Alert box red',
        'block' => 'section',
        'classes' => 'alertbox red',
        'wrapper' => true
        ),
    array(
        'title' => 'Alert box green',
        'block' => 'section',
        'classes' => 'alertbox green',
        'wrapper' => true
        ),
    array(
        'title' => 'Alert box pink',
        'block' => 'section',
        'classes' => 'alertbox pink',
        'wrapper' => true
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}

// Learn TinyMCE style format options at http://www.tinymce.com/wiki.php/Configuration:formats
 // Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts'
add_action('wp_enqueue_scripts', 'tuts_mcekit_editor_enqueue');

// Enqueue stylesheet, if it exists.
function tuts_mcekit_editor_enqueue() {
$StyleUrl = get_stylesheet_directory_uri().'/style-sheets/tinymce.min.css'; // Customstyle.css is relative to the current file
wp_enqueue_style( 'myCustomStyles', $StyleUrl );
}

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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