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: {
    configuration: {
      // 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: {
			configuration: {
				custom1: {
					plugins: 'link', // plus eventueel andere 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.

Juridisch Loket componenten

Voor het Juridisch Loket zijn 3 verschillende componenten gemaakt. Deze componenten zijn: button, stepByStep en alert. Deze componenten kunnen worden toegevoegd aan de toolbar in de configuratie. Ook maakt Juridisch gebruik van <b> en <i> tags in plaats van <strong> en <em>. Dit kan worden aangepast in de configuratie door de formats key aan te passen en de strong en emphasis toe te voegen aan de toolbar.

bodyTextConfig: {
  plugins: 'lists checklist link media image help wordcount code advcode table codesample',
  toolbar: 'blocks | bold italic underline strikethrough | strong emphasis | strapiInternalLink strapiMediaLibrary | bullist numlist checklist | codesample blockquote | button stepByStep alert | table tableinsertcolbefore tableinsertcolafter tableinsertrowbefore tableinsertrowafter tabledeleterow tabledeletecol tablemergecells | code',
  image_caption: true,
  toolbar_mode: 'wrap',
  menubar: false,
  formats: {
    bold: { inline: 'b' },
    italic: { inline: 'i' },
    underline: { inline: 'u' },
    strong: { inline: 'strong' },
    emphasis: { inline: 'em' }
  },
  branding: false
},

Externe API

De "externe api" tab (of adviesboom) kan worden aangezet door in de configuratie van de tinymce plugin de external api op enabled te zetten. Bijvoorbeeld hieronder in de configuratie van het content field.

"content": {
  "type": "customField",
  "customField": "plugin::tinymce.tinymce",
  "options": {
    "preset": "custom",
    "customConfig": "bodyTextConfig",
    "externalApi": {
      "enabled": true, // schakelt de externe api in
      "tabName": "Adviesboom", // naam van de tab in de interne links plugin
      "labelPath": "question",
      "valuePath": "question",
      "labelAdditionPath": "questionaire.title"
    }
  }
},