Optimalisatie CKeditor Drupal

Geplaatst op 13 april 2019 door Gerdt Brouwer

Omdat het niet is toegestaan style elementen in de code van je website te hebben zijn er veel functies van de ckeditor niet toegestaan.
Toch kan je de gewenste functionaliteiten vaak makkelijk toevoegen via de button styles.

CKeditor maakt het mogelijk om middels een javascript stylen te definiëren die door de gebruiker gekozen kunnen worden.


/*

* This file is used/requested by the 'Styles' button.
* The 'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.
*/

if(typeof(CKEDITOR) !== 'undefined') {
  CKEDITOR.addStylesSet( 'drupal',
  [
   {
     name : 'Schuin',
     element : 'span',
     attributes :
     {
       'class' : 'italic'
     }
    },
    {
name : 'Onderstrepen',
      element : 'span',
      attributes :
        {
        'class' : 'underline'
        }
      },
    ]
  );
}

Als je dit script hebt staan in je thema, bv in de folder js, kan je deze koppelen aan je editor via Instellingen – Inhoud samenstellen – ckeditor (admin/config/content/ckeditor/) en selecteer het profiel dat je wil bewerken.
Zorg er voor dat de button styles beschikbaar is in de editor bij het tabblad Editor weergave
Bij het tabblad CSS staat de optie om een eigen script te laden via Predefined styles path. Zet de waarde op %tjs/ckeditor.styles.js

Pas de css aan zodat span.italic en span.underline ook daadwerkelijk tonen zoals beschreven aan de gebruiker.

Gepost in categorie: Drupal, WCAG 2.0, Webguidlines

Reacties