@webbio/strapi-plugin-tinymce NPM

Strapi plugin tinymce

Configuratie van de plugin

Voeg de plugin toe aan het plugin.ts bestand. Het is belangrijk om de configuratie te doen in de configuration key, omdat de back-end deze key ophaalt en gebruikt als de configuratie.

'tinymce': {
  enabled: true,
  config: {
    congifguration: {
      // config
    }
  }
}

De plugin kan worden geconfigureerd naar de wensen van een project. Het enige wat perse moet worden geconfigureerd is de API key. Daarnaast is er de optie om custom configs te maken voor de editor ("custom1" en "custom2" in het voorbeeld). Op deze manier kan je voor verschillende content types de ideale editor configureren. Voorbeeld voor de configuratie:

'tinymce': {
  enabled: true,
  config: {
    configuration: {
      apiKey: env('TINYMCE_API_KEY'),
      custom1: {
        plugins: 'lists link image paste help wordcount image',
        toolbar: 'undo redo | blocks | bold italic | image alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
      },
      custom2: {
        plugins: 'lists link image paste help wordcount image media',
        toolbar: 'undo redo | blocks | bold italic blockquote | image media | help'
      }
    }
  }
},

Custom configuraties kunnen verschillen per content-type/module. Daarom is er een input veld 'customConfig' waar de correcte custom config kan worden ingesteld. Een voorbeeld voor een attribuut met een custom config is:

"content": {
  "type": "customField",
  "options": {
    "preset": "custom", // Kan "custom" of "default" zijn
    "customConfig": "custom1" // Hier kies je de custom config uit de plugin.ts configuratie.
  },
  "customField": "plugin::tinymce.tinymce"
}

Buttons

In deze plugin is er gebruik gemaakt van de tinymce 'link' plugin om een button te creëren, dit gebeurd door styling toe te voegen aan de link. Een button kan geconfigureerd worden in de plugin config. In dit voorbeeld maak ik een button object met de configuratie van de button/link daar in.

In de link_class_list kan je classnames toevoegen die later te kiezen zijn in een dropdown. De title is de tekst die wordt wordt weergegeven in de dropdown en de value is de classname die wordt toegevoegd aan de link.

In de link_list kan je URL's toevoegen die later te kiezen zijn in een dropdown. Dit zou gebruikt kunnen worden om de pagina's in te zetten zodat de URL niet telkens handmatig uitgeschreven hoeven te worden.

Ten slotte in de content_style kan je eigen css meegeven. In dit voorbeeld geef ik styling mee aan de class buttonLink (aangemaakt in de link_class_list) om er voor te zorgen dat de link er uit ziet als een button. Goed om te weten: Mocht je nog meer content_style willen toevoegen, dan zou ik dit uit deze button halen en globaal maken. Ik verwacht namelijk dat als er meerdere content_styles worden toegevoegd dat dan de een de ander overschrijft

const button = {
  link_class_list: [
    {title: 'None', value: ''},
    {title: 'button', value: 'buttonLink'}
  ],
  link_list: [
    {title: 'page1', value: 'https://www.google.nl'},
    {title: 'page2', value: 'https://www.webbio.nl'},
  ],
  content_style: '.buttonLink {background-color: red; color: white; display: block; width: 115px; height: 25px; padding: 10px; text-align: center; line-height: 25px; text-decoration: none;}'
}

return {
  'tinymce': {
    enabled: true,
    config: {
      congifguration: {
        custom1: {
          plugins: 'link', // plus eventueelandere plugins
          toolbar: 'link', // plus eventueel andere toolbar buttons
          ...button
        }
      }
    }
  }
}

Strapi medialibrary

Er kan gebruik gemaakt worden van de Strapi medialibrary. Om hier gebruik van te maken moet je strapiMediaLibrary toevoegen aan de toolbar in de configuratie.