Aller au contenu

Utilisation des plugins

Activez et configurez les plugins Silex pour étendre les fonctionnalités de l'éditeur.

Aperçu

Les plugins étendent Silex en ajoutant des fonctionnalités d'interface, des connecteurs, des transformateurs de publication ou des comportements personnalisés. Ils sont chargés dans les configurations serveur et client sous forme de modules de plugins (objets JavaScript avec une fonction init).

Les plugins Silex se répartissent en trois catégories : - Plugins d'éditeur — Étendent les fonctionnalités de GrapesJS (blocs, commandes, panneaux d'interface) - Plugins serveur — Ajoutent des connecteurs, des routes ou de la logique backend - Transformateurs de publication — Personnalisent la compilation et la publication des sites web

Prérequis

Plugins disponibles

Silex inclut des plugins intégrés. Activez-les en les ajoutant à votre fichier de configuration.

Plugins d'éditeur

Plugins qui étendent l'éditeur GrapesJS dans le navigateur :

Plugin Paquet npm Rôle
Custom Code grapesjs-custom-code Ajouter des blocs HTML/CSS/JS personnalisés
CSS Variables grapesjs-css-variables Interface pour créer des propriétés CSS personnalisées
Tooltip grapesjs-tooltip Infobulles au survol
Data Source grapesjs-data-source Liaison CMS et expressions (intégré)

Plugins serveur

Plugins qui étendent le backend :

Plugin Rôle
Dashboard Tableau de bord utilisateur (silex-dashboard)
FTP Connector Stockage et hébergement FTP
GitLab Connector Stockage et hébergement GitLab
Download Connector Téléchargement ZIP pour la publication
Onboarding Flux d'intégration des utilisateurs

Transformateurs de publication

Transformateurs intégrés pour les besoins courants de publication :

Transformateur Rôle
Assets Réécriture des URL des ressources pour les sites publiés
Custom Code Inclusion des blocs de code personnalisé dans la sortie
Fonts Intégration des polices web

Charger des plugins dans la configuration serveur

Ajoutez des plugins au fichier de configuration serveur (.silex.js) :

const dashboardPlugin = require('@silexlabs/silex-dashboard')
const customPlugin = require('./my-plugin')

module.exports = async function (config) {
  // Add dashboard
  await config.addPlugin(dashboardPlugin, {})

  // Add custom plugin with options
  await config.addPlugin(customPlugin, {
    apiKey: process.env.API_KEY,
    debug: true,
  })
}

Charger des plugins dans la configuration client

Ajoutez des plugins d'éditeur au fichier de configuration client (client-config.js) :

import grapesJsCustomCode from 'grapesjs-custom-code'
import grapesJsTooltip from 'grapesjs-tooltip'

export default async function (config) {
  // Add plugins to GrapesJS
  config.grapesJsConfig.plugins = [
    ...config.grapesJsConfig.plugins,
    grapesJsCustomCode,
    grapesJsTooltip,
  ]

  // Plugin options
  config.grapesJsConfig.pluginsOpts = {
    ...config.grapesJsConfig.pluginsOpts,
    [grapesJsCustomCode]: {
      languages: ['javascript', 'css', 'html'],
    },
    [grapesJsTooltip]: {
      position: 'top',
    },
  }
}

Patrons de configuration des plugins

Configuration basée sur l'environnement

Passez des variables d'environnement aux plugins :

// .silex.js
const StripePlugin = require('./plugins/stripe-plugin')

module.exports = async function (config) {
  await config.addPlugin(StripePlugin, {
    apiKey: process.env.STRIPE_API_KEY,
    webhookSecret: process.env.STRIPE_WEBHOOK_SECRET,
  })
}

Définissez dans .env :

STRIPE_API_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...

Chargement conditionnel

Chargez des plugins selon l'environnement :

module.exports = async function (config) {
  // Only in production
  if (process.env.NODE_ENV === 'production') {
    const analyticsPlugin = require('./plugins/analytics')
    await config.addPlugin(analyticsPlugin, {})
  }

  // Only in development
  if (config.debug) {
    const debugPlugin = require('./plugins/debug')
    await config.addPlugin(debugPlugin, {})
  }
}

Chaînes de plugins

Certains plugins étendent d'autres plugins. Chargez-les dans l'ordre :

module.exports = async function (config) {
  // Core CMS plugin first
  const cmsPlugin = require('./plugins/cms-core')
  await config.addPlugin(cmsPlugin, {})

  // Extensions after core
  const cmsExtension = require('./plugins/cms-extension')
  await config.addPlugin(cmsExtension, {})
}

Options des plugins

Patrons d'options courants :

await config.addPlugin(myPlugin, {
  // Authentication
  apiKey: 'sk_live_...',
  clientId: 'client_id',

  // Behavior
  debug: true,
  cacheEnabled: false,
  cacheTtl: 3600,

  // UI
  position: 'sidebar',
  theme: 'dark',

  // Features
  enableFeatureX: true,
  featureYConfig: { /* ... */ },
})

Exemple : Ajouter le plugin Custom Code

Le plugin Custom Code permet aux éditeurs d'ajouter des blocs HTML, CSS et JavaScript :

// client-config.js
import grapesJsCustomCode from 'grapesjs-custom-code'

export default async function (config) {
  config.grapesJsConfig.plugins = [
    ...config.grapesJsConfig.plugins,
    grapesJsCustomCode,
  ]

  config.grapesJsConfig.pluginsOpts = {
    ...config.grapesJsConfig.pluginsOpts,
    [grapesJsCustomCode]: {
      languages: ['javascript', 'css', 'html'],
      defaultLanguage: 'html',
      showLabel: true,
    },
  }
}

L'éditeur dispose maintenant d'un bloc "Custom Code" dans la barre latérale.

Exemple : Plugin serveur avec connecteurs

Ajoutez un connecteur personnalisé qui communique avec une API externe :

// .silex.js
const MyApiConnector = require('./plugins/my-api-connector')

module.exports = async function (config) {
  await config.addPlugin(MyApiConnector, {
    apiUrl: process.env.MY_API_URL,
    apiKey: process.env.MY_API_KEY,
  })
}

Le plugin enregistre un connecteur de stockage ou d'hébergement en interne.

Plugins tiers

Recherchez des plugins maintenus par la communauté sur npm :

npm search grapesjs
npm search silex

Installez et utilisez :

npm install my-grapesjs-plugin

Puis chargez dans votre configuration :

import myPlugin from 'my-grapesjs-plugin'

export default async function (config) {
  config.grapesJsConfig.plugins.push(myPlugin)
}

Dépannage

Le plugin ne se charge pas

Vérifiez :

  1. Le plugin est installé : npm ls plugin-name
  2. Le fichier de configuration est servi : DevTools du navigateur → Network → client-config.js
  3. Pas d'erreurs de syntaxe dans la configuration : vérifiez la console du navigateur
  4. Le chemin du plugin est correct (si fichier local)

Activez le mode débogage pour voir l'initialisation des plugins :

export default async function (config) {
  console.log('Loading plugins...')
  config.grapesJsConfig.plugins.push(myPlugin)
  console.log('Plugins loaded:', config.grapesJsConfig.plugins)
}

Conflits entre plugins

Si deux plugins interfèrent (par ex. les deux ajoutent la même commande) :

  1. Changez l'ordre de chargement
  2. Consultez la documentation des plugins pour les conflits
  3. Désactivez l'un et testez

Problèmes de mémoire/performance

Si l'éditeur devient lent :

  1. Réduisez le nombre de plugins
  2. Vérifiez DevTools du navigateur → onglet Performance
  3. Profilez avec DevTools → onglet Memory
  4. Certains plugins (notamment les interfaces complexes) consomment plus de ressources

Voir aussi

Éditer cette page sur GitLab