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
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;
}
