Followed several tutorials and have added custom classes in the formats section of the visual editor. The classes used are being appended and not replaced as I had intended. Is there a way to have them overwrite the existing style if there is one instead of adding to the class tag?
My use case is this: Content editor lands on the visual editor page and clicks into the visual editor. They select a piece of text and select a class from the formats dropdown I have added. They dont like the color of the link and decide to change it by going back up to the formats tab and selecting a different value. Behind the scenes, WordPress replaces the class. I realize I could use the styles key in the json array, but that would produce inline-styles, which I’d like to avoid.
Thanks!
add_filter('tiny_mce_before_init', 'custom_format_dropdown');
function custom_format_dropdown($settings) {
$new_formats = array(
array(
'title' => 'Multibox Headline',
'selector' => 'p',
'classes' => 'headLine',
'wrapper' => true,
),
array(
'title' => 'Link Styles',
//'icon' => 'link',
'items' => array(
array(
'title' => 'Green Bold Link ➲',
'selector' => 'a',
'classes' => 'listItemGreen',
'inline' => 'span',
),
array(
'title' => 'Blue Bold Link ➲',
'selector' => 'a',
'classes' => 'listItemBlue',
'inline' => 'span',
),
),
),
);
/* Check if custom "style_formats" is enabled */
if (isset($settings['style_formats'])) {
/* Get old style_format config */
$old_formats = json_decode($settings['style_formats']);
/* Merge it with our own */
$new_formats = array_merge($new_formats, $old_formats);
}
/* Add it in tinymce config as json data */
$settings['style_formats'] = json_encode($new_formats);
return $settings;
}