Utiliser des plugins¶

Silex peut charger trois sortes de plugins :

Les plugins GrapesJS s'exécutent dans l'éditeur, dans le navigateur. On les charge dans la config client.
Les plugins serveur Silex s'exécutent dans Node. On les charge avec la variable d'environnement SILEX_SERVER_CONFIG. Ils ajoutent des routes, des connecteurs, ou réagissent aux événements du serveur.
Les transformateurs de publication tournent dans Silex, au moment de publier. Ils modifient les fichiers publiés. On les ajoute dans la config client. Voir Transformateurs de publication.

Ces deux choses ne sont pas des plugins Silex :

Les plugins Eleventy tournent dans le build du site publié, sur la forge, après la publication par Silex. Voir Ajouter un plugin.
Le build de la CI lance les commandes de build.json sur la forge. Voir Personnaliser le build.

Les plugins déjà inclus dans Silex¶

Silex charge ces plugins GrapesJS, entre autres. Vous n'avez pas à les ajouter :

Plugin	Rôle
`grapesjs-custom-code`	le bloc HTML pour du code personnalisé
`@silexlabs/grapesjs-css-variables`	les variables CSS
`@silexlabs/grapesjs-fonts`	la boîte de dialogue des polices
`@silexlabs/grapesjs-symbols`	les symboles
`@silexlabs/grapesjs-data-source` (quand le CMS est activé)	le CMS : sources de données et expressions
`grapesjs-blocks-basic`, `grapesjs-plugin-forms`	blocs de base et de formulaire

La liste complète est dans editor/grapesjs/index.ts.

Charger un plugin GrapesJS¶

La config client s'exécute dans le navigateur sans bundler : on ne peut donc pas installer un plugin avec npm install et l'importer par son nom. Importez-le plutôt par son URL. Beaucoup de plugins publiés sur npm sont disponibles en modules ES sur un CDN :

// client-config.js, SILEX_CLIENT_CONFIG pointe vers ce fichier
import tooltip from 'https://cdn.jsdelivr.net/npm/grapesjs-tooltip@0.1.8/+esm'

export default async function (config) {
  config.grapesJsConfig.plugins.push(tooltip)
  config.grapesJsConfig.pluginsOpts[tooltip.toString()] = {
    // options du plugin, voir son README
  }
  return {}
}

L'URL doit renvoyer un module ES. Le /+esm de jsDelivr en construit un à partir du paquet npm, même s'il est en UMD ou en CommonJS. Un fichier UMD brut (dist/index.js) ne marche pas.

Pour utiliser un fichier que vous hébergez vous-même, servez-le depuis un plugin serveur et importez-le par son chemin. Voir Servir un fichier pour l'éditeur.

Charger un plugin serveur Silex¶

Faites pointer SILEX_SERVER_CONFIG vers un fichier JavaScript. Ce fichier est lui-même un plugin Silex :

SILEX_SERVER_CONFIG=/chemin/vers/server-config.js pnpm start

Avec Docker :

environment:
  SILEX_SERVER_CONFIG: /silex/server-config.js
volumes:
  - ./server-config.js:/silex/server-config.js:ro

Depuis ce fichier, chargez d'autres plugins avec config.addPlugin() :

// server-config.js
const myPlugin = require('./my-plugin.js')

module.exports = async function (config) {
  await config.addPlugin(myPlugin, { greeting: 'Hello' })
  return {}
}

Le deuxième argument d'addPlugin est passé au plugin dans options. Utilisez require() ou un chemin absolu : un chemin relatif passé en chaîne n'est pas résolu depuis votre fichier.

Silex charge aussi sa propre config serveur, server/deploy/.silex.js, après votre fichier. Elle sert l'éditeur et le tableau de bord, et ajoute les connecteurs choisis par STORAGE_CONNECTORS et HOSTING_CONNECTORS. Voir Configuration serveur.

Voir aussi¶

Éditer cette page sur GitLab