3

I have added some custom styles to the TinyMCE editor using the tiny_mce_before_init filter hook. They work by adding classes to the block-level element. See the code below:

function byron_mce_before_init($settings) {
    $style_formats = [
        [
            'title' => 'Lead',
            'block' => 'p',
            'classes' => 'lead',
        ],
        [
            'title' => 'Tagline',
            'block' => 'h5',
            'classes' => 'tagline',
        ],
    ];
    $settings['style_formats'] = json_encode($style_formats);
    return $settings;
}
add_filter('tiny_mce_before_init', 'byron_mce_before_init');

The problem I am having, is that when switching between the styles defined above, the class is not removed; in stead, the new class is appended to the old class in stead of replacing it. I can't seem to figure out how to remove the old classes when switching between styles. Any help would be greatly appreciated.

  • This looks a question about the inner workings of tiny mce. You have a better chance getting an answer here: community.tinymce.com – cjbj Jun 7 '18 at 8:34
  • Thanks, I'll have a look. I asked here because I am using WordPress functions. But I guess the array is just passed to TinyMCE – Connor Jun 7 '18 at 9:03
1

Seems the question was asked at community.tinymce.com and the answer is here: https://community.tinymce.com/communityQuestion?id=90661000000IiyjAAC

You can't make the style you've defined remove any previous classes, but what you can do is 'apply' the style again by selecting it from the dropdown list and it will be removed - i.e. the class will be removed from the tag. You can then choose a different style from the drop-down list and the class relevant to that style will be added to the tag.

  • I was the one posting the question. Thanks for mentioning it here too, I'd completely forgotten about it. – Connor Jul 10 '18 at 12:43
0

I had a similar issue

let doNotRemoveFormat = false;

tinymce.init({
style_formats:  [
              {title: 'Footer - 11px', inline: 'span', classes: 'admin-footer'},
              {title: 'Standard - 14px', inline: 'span'},
              {title: 'Heading 1 - 19px', inline: 'span', classes: 'admin-heading-1'},  
              {title: 'Heading 2 - 22px', inline: 'span', classes: 'admin-heading-2'}  
            ],
setup: function (ed) {
  ed.on('ExecCommand', function checkListNodes (evt) {
if (cmd === 'mceToggleFormat') {
    if(!doNotRemoveFormat) {  
      let val = 'runThis|' + evt.value;
      this.execCommand('RemoveFormat', false, val);
    } else {
      doNotRemoveFormat = false;
    }
} else if (cmd === 'RemoveFormat') {
  let value = evt.value.split("|");
  if(value[0] === 'runThis') {
    doNotRemoveFormat = true;
    this.execCommand('mceToggleFormat', false, value[1])
  }
});

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.