it-swarm.com.de

Benutzerdefinierte TinyMCE-Stile entfernen die Klasse beim Wechseln der Stile

Ich habe dem TinyMCE-Editor mithilfe des tiny_mce_before_init-Filter-Hooks einige benutzerdefinierte Stile hinzugefügt. Sie arbeiten, indem sie dem Element auf Blockebene Klassen hinzufügen. Siehe den Code unten:

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');

Das Problem, das ich habe, ist, dass beim Umschalten zwischen den oben definierten Stilen die Klasse nicht entfernt wird; Stattdessen wird die neue Klasse an die alte Klasse angehängt, anstatt sie zu ersetzen. Ich kann nicht scheinen, herauszufinden, wie man die alten Klassen entfernt, wenn man zwischen Stilen wechselt. Jede Hilfe wäre sehr dankbar.

2
Connor

Die Frage wurde anscheinend unter community.tinymce.com gestellt und die Antwort ist hier: https://community.tinymce.com/communityQuestion?id=90661000000IiyjAAC

Sie können nicht festlegen, dass der von Ihnen definierte Stil vorherige Klassen entfernt. Sie können den Stil jedoch erneut anwenden, indem Sie ihn aus der Dropdown-Liste auswählen und er wird entfernt, dh die Klasse wird aus dem Tag entfernt . Sie können dann einen anderen Stil aus der Dropdown-Liste auswählen, und die für diesen Stil relevante Klasse wird dem Tag hinzugefügt.

1
Nat

Ich hatte ein ähnliches Problem

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])
  }
});
0
Chris