Preparando el entorno

If you want to create your own plugin, you're in the right section in the docs. You can use any existant plugin as a base to create your own plugin. It is very easy to take existing Reacr components and integrate them in Ediphy in the form of plugins.

Enviroment preparation

1. From the project directory run: yarn run create-plugin "Name Of The plugin" This will create a folder inside the directory plugins named NameOfThePlugin containing all the files you need.

2. In order to include it in Ediphy you need to add it to pluginList in ~/core/config.es6.

   #~/dist/core/config.es6
   ...
   sections_have_content: false,
   pluginList: [
     'BasicImage',
     'BasicText',
     'RichText',
     'BasicVideo',
     'Youtube',
     'Webpage',
     'CajasColor',
     'Container',
     'NombreDelPlugin', // THIS IS THE PLUGIN THAT YOU HAVE JUST CREATED
   ],
   availableLanguages:[
     'en',
     'es'
   ]
   ...
   

The plugin that you have created will provide a simple plugin that displays a div with the text "Hello Ediphy". If you take a close look to the template, you can see that the second word (Ediphy) is bound to the state, which can be changed from the toolbar.

This plugin should be taken as a starting point for more complex plugins. A folder to hold the language translation (locales) and a folder for the viewer template will also be created.

The command also allows specifying the plugin category (example: yarn run create-plugin "Name Of The plugin" category text), and whether the plugin is rich (yarn run create-plugin "Name Of The plugin" category text) or if it does not need a viewer template (yarn run create-plugin "Name Of The plugin" no-visor).

In the rest of the sections of this docs you'll get to know the meaning of these options.

The directory hierarchy that the CLI command creates is the following:

    PROJECT_DIR/plugins
     └── <NameOfThePlugin>
        ├── <NameOfThePlugin>.js
        ├── locales
        |  ├── en.js
        |  └── es.js
        └── visor
           └── <NameOfThePlugin>.js

In the section Configuration you will learn to customize the plugin in order to achieve the desired functionality.