Install GrapesJs plugin

The tooltip plugin

In this guide, we will see how to add the toolip plugin to the GrapesJs editor.

Development

1. Create the new module's directory and grapesjs_tooltip_plugin.info.yml file:
   

   name: GrapesJS Tooltip
   type: module
   description: The GrapesJS Tooltip module provides a tooltip block in GrapesJs Editor.
   package: Page builder
   core_version_requirement: ^8 || ^9
   dependencies:
     - grapesjs_editor:grapesjs_editor
   

2. Create grapesjs_tooltip_plugin.libraries.yml file:
   

   grapesjs-tooltip:
     remote: https://github.com/artf/grapesjs-tooltip
     version: 0.1.5
     license:
       name: BSD 3-clause
       url: https://github.com/artf/grapesjs-tooltip/blob/v0.1.5/LICENSE
       gpl-compatible: true
     js:
       https://unpkg.com/grapesjs-tooltip: { type: external, minified: true }
   

3. Create src/Plugin/GrapesJSPlugin/DrupalTooltipBlock.php:
   

   <?php
   
   namespace Drupal\grapesjs_tooltip_plugin\Plugin\GrapesJSPlugin;
   
   use Drupal\editor\Entity\Editor;
   use Drupal\grapesjs_editor\GrapesJSPluginBase;
   use Drupal\grapesjs_editor\GrapesJSPluginInterface;
   
   /**
    * Defines the "drupal_tooltip_block" plugin.
    *
    * @GrapesJSPlugin(
    *   id = "drupal_tooltip_block",
    *   label = @Translation("Tooltip Block"),
    *   module = "grapesjs_tooltip_plugin"
    * )
    */
   class DrupalTooltipBlock extends GrapesJSPluginBase implements GrapesJSPluginInterface {
   
     /**
      * {@inheritDoc}
      */
     public function getLibraries(Editor $editor) {
       return [
         'grapesjs_tooltip_plugin/grapesjs-tooltip',
       ];
     }
   
     /**
      * {@inheritdoc}
      */
     public function getConfig(Editor $editor) {
       return [
         'grapesSettings' => [
           'plugins' => [
             'grapesjs-tooltip',
           ],
         ],
       ];
     }
   
   }
   

Installation and configuration

1. Enable the new module.
2. Now the tooltip block is enabled:
   
3. We can configure the plugin's options (see GrapesJs tooltip plugin for the complete list) with hook_editor_js_settings_alter:
   

   /**
    * Implements hook_editor_js_settings_alter().
    */
   function grapesjs_tooltip_plugin_editor_js_settings_alter(array &$settings) {
     $grapesjs_settings = $settings['editor']['formats']['grapesjs_editor']['editorSettings']['grapesSettings'];
     $settings['editor']['formats']['grapesjs_editor']['editorSettings']['grapesSettings'] = array_merge_recursive(
       $grapesjs_settings,
       [
         'pluginsOpts' => [
           'grapesjs-tooltip' => [
             'labelTooltip' => t('Custom tooltip'),
           ],
         ],
       ]
     );
   }

4. Now the tooltip block has a custom label: