Configuracion

The file plugins/<NameOfThePlugin>/<NameOfThePlugin>.js is the main plugin file. It defines the interface that the plugin will have in Ediphy, how the user will customize its content, which particular attributes it has, etc.

export function <NameOfThePlugin>(base){
  return{
    init: function(){
    },
    getConfig: function(state){
    },
    getToolbar: function(state){
    },
    getInitialState: function(){
    },
    getRenderTemplate: function(state, props){
    },
    getConfigTemplate: function(id,state,updateState,props){
    },

  }
}

Next, you will learn how to use some of the necessary methods of the plugin.

init

This method is used for initializing the necessary parameters for the right functioning of the plugin. It is run only once while the application loads. An example of this is downloading an script needed for the plugin, such as the Google Maps API. In most cases this method will not be necessary.

export function BasicImage(base) {
  return {
    init: function () {
      // Code here
    },
    ...

  };
}

getConfig

This method returns an object with the specific configuration for this plugin.

getConfig: function () {
  return {
    name: <NameOfThePlugin>,
    displayName: 'Name of the Plugin',
    category: 'image',
    icon: 'image'
  };
}

• name: it should be a text string with the we used all the time.
• displayName (optional): it is the name that will appear in the application and that the user will see. If it is not specified, the name specified will be used.
• category (optional): define which section in the top bar should contain the plugin. It takes one of the following values ("text", "image", "multimedia", "objects", "evaluation"). If none is assigned, it will have the value "text" by default, if the assigned category is invalid, the plugin won't appear.
• icon (optional): it specifies which icon will represent the plugin. It should be chosen from this list iconos. In case iconFromUrl (next) is true, any image URL can be used instead.
• iconFromUrl (optional): a boolean value that allows to use images instead of icons in the icon option. By default, it is false.
• isRich (optional): it is a boolean value that gives you access to rich plugins functionalities. By default it is false.
• flavor: it specifies if the plugin is written in React or not. Its values can be react (default) or plain (plain JS), which is in process of being deprecated.
• needsConfigModal (optional): it is a boolean value that defines if the plugin needs an initial additional configuration dialog. By default it is false, but if a true value is provided, then it is necessary to add the method getConfigTemplate to the plugin in order to define how the interface of this dialog would be.
• needsTextEdition (optional): it is a boolean value that is used to specify if the plugin will need the provided tools for text edition. It is false by default, but if it is assigned a true value, a new "hidden" property will appear in the state called "__text" that will contain plugin text. This is the only situation where a plugin can't have the method getRenderTemplate, because in case it fails, it will automatically generate returning the value of __text.
• aspectRatioButtonConfig (optional): it is an object that is used to configure the button that blocks the aspect relation when changing the box size. It has two properties, a "location" one that is an array that is telling the keys of the different ancestors that will have in the toolbar(tabs, accordion and subaccordion if existing), and another "defaultValue" that tells if it has to be active or not initially (by default, not). This configuration changes to a boolean value that will set the localization (["main", "structure"]).
• needsPointerEventsAllowed (optional): it is a boolean value that, if set to true, it provides a button that allows the user to manipulate the plugin box with the mouse when editing, instead of only in visualization, easing its configuration (use example: center and zoom the map). By default it is false.
• limitToOneInstance (optional): boolean value that lets to limit to only one instance of the plugin per page.
• createFromLibrary (optional): this property indicates if an instance of the plugin can be created directly from the content library. It is an array whose first value specifies the MIME type that the plugin is made of, and the second value indicates which part of the plugin's state specifies the file with said MIME type. For eample, in the case of an image, the value of this property would be as follows: ['image/*', 'url'].
• searchIcon (optional): boolean value that specifies if a shortcut is added in order to allow to easily change the plugin content through the content library. If the MIME type has already been specified, as well as the part of the state associated with it, it is enough to provide a true value. It also takes array values like the previous field and the string type.
• isComplex (optional): boolean value that specifies if this plugin may contain insances of other plugins inside.

Also in getConfig() intiial values width and height are specified. Slides can only have plugins with relative units(%) because it scales with screen size.

• initialWidth: Tells the initial width of the plugin in the documents. If not specified, default value is '20%'. It can be a percentage value, in pixels or 'auto'.
• initialHeight: Tells the initial height of the plugin in the documents. If not specified, default value is '20%'. It can be a percentage value, in pixels or 'auto'.
• initialWidthSlide: Tells the initial width of the plugin in the documents. If not specified, default value is initialWidth. It can be a percentage value, in pixels or 'auto'. It is mandatory if initialWidth is in px.
• initialHeightSlide: Tells the initial width of the plugin in the documents. If not specified, default value is ìnitialHeight. It can be a percentage value, in pixels or 'auto'. It is mandatory if ìnitialHeight is in px.

Check the section State and toolbar in order to keep customizing the plugin.