TinyMCE

För att lägga till nya klasser till olika content blocks behöver tinyMCE uppdateras. Skapa ett nytt dokument med namnet tinymce.js som placeras i config-mappen. Kopiera följande objekt till tinymce.js. 

var tinymceStoreConfig = {

style_formats: [
  'parent',
  {title: 'Headers', items: [
    'parent',
    {title: 'Header 6', disabled: true},
    {title: 'HEADER 7', format: 'pre'},
  ]},
  {title: 'Ny kategori', items: [
    'parent',
    {title: 'Lilla texten', inline: 'span', classes: 'small', styles: {"font-size": "8pt"}}
    ]}
  ],
  link_class_list: [
    'parent',
    {title: 'Liten Ljus', disabled: true},
    {title: 'Mörk ihålig knapp', value: 'hollow button dark expanded'}
  ],
};

style_formats:

Är de val som finns under ”Format” menyn ex. Rubriker/Texter/Block. I kod i kodexemplet hittar du ”Ny kategori” som ligger efter ”Headers” objektet. På detta sätt kan du lägga till ytterligare menyval med tillhörande styling.

• Items: Här ligger alla style objekt som finns eller som läggs till.
• Title: Titel på den klassen och som visas i menyvalen den matchas också mot ev befintliga klasser som också skulle skrivas över i de fall med nya värden läggs de till. Vid osäkerhet gå in i temp-mappen och admin_bar.js i för den aktuella mallen för att se de kompilerade klasserna.
• Inline/p/block/format: Ytterligare information om hur elementet som får denna klass ska tolkas.
• Classes: CSS/SASS klassen som deklareras i passande scss fil ex. Headings klass i _typography.scss.
• Styles: Här kan man lägga alla styling i de fall man inte vill använda sig av klasser. Detta kommer att genereras som inline-style.
• Parent: Läggs till högst upp i arrayen och innebär att de nya värdena kommer att läggas ihop med de gamla. Utesluter man ‘parent’ kommer hela det gamla meny-valet att ersättas med de nya.

link_class_list:

• Title: Samma som i style_formats
• Value: Där lägger man till de css klasser som behövs. Där går det att kombinera med Foundations klasser med egna klasser för önskad design.

disabled:

true/false:

I de fallen som man behöver dölja en klass för användaren så anger man ’Title’ och sedan ex. disabled: true. Se då till att denna klass existerar i ’parent’ det vill säga existerade klasser. Skulle man enbart vilja göra detta på en specifik mall så kan man gå in i temp-mappen och admin_bar.js för att hitta den klassen man vill avaktivera.