Skip to content

Configuracion_es

sonsoleslp edited this page Aug 16, 2018 · 5 revisions

El fichero plugins/<NombreDelPlugin>/<NombreDelPlugin>.js es el fichero principal del plugin. En él se define la interfaz que tendrá en Ediphy, cómo el usuario va a poder customizar su contenido, qué características particulares tiene, etc.

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

  }
}

A continuación se detallará la utilidad de algunos de los métodos necesarios para el plugin.

init

Este método se usa para inicializar parámetros necesarios para el correcto funcionamiento del plugin. Se ejecuta una sola vez mientras se carga la aplicación. Un ejemplo es la descarga de un script necesario para el uso del plugin, por ejemplo la API de Google Maps. En la mayoría de los casos no será necesario emplear este método.

export function BasicImage(base) {
  return {
    init: function () {
      // Código aquí
    },
    ...

  };
}

getConfig

Aquí podremos especificar configuración concreta de este plugin. Es prácticamente el único método obligatorio (el resto son más o menos opcionales). Debe devolver un objeto con la configuración:

getConfig: function () {
  return {
    name: <NombreDelPlugin>,
    displayName: Ediphy.i18n.t('PluginName'),
    category: 'image',
    icon: 'image'
  };
}
  • name: debe ser una cadena de texto con el que hemos utilizado para crear el plugin y que da nombre a la carpeta que lo contiene.
  • displayName (opcional): es el nombre que aparecerá en la aplicación de cara al usuario. Si no se especifica, se usará name. Se puede usar un valor de los archivos de traducción usando Ediphy.i18n.t("clave") siendo "clave" la clave asignada en estos archivos.
  • category (opcional): define a qué sección de la barra superior debe añadirse, toma uno de los siguientes valores ("text", "image", "multimedia", "objects", "evaluation" ). Si no se asigna ninguno, tendrá por defecto el valor "text", si se asigna uno inválido, el plugin no aparecerá en la barra superior.
  • icon (opcional): especifica el icono que aparecerá junto al nombre del plugin, debe seleccionarse de esta lista iconos. En caso de que iconFromUrl (a continuación) sea true, podrá utilizarse cualquier imagen desde una url en vez de un icono de la lista anterior.
  • iconFromUrl (opcional): es un valor booleano que permite utilizar imágenes en vez de iconos en el apartado icon. Por defecto, es false.
  • isRich (opcional): es un valor booleano que da acceso a las funcionalidades de plugins enriquecidos. Por defecto, es falso.
  • flavor (opcional): especifica de qué modo ha sido escrito el plugin, puede ser "plain" o "react". Por defecto es "react" indicando que ha sido escrito usando React, ya que los plugins en JavaScript estándar están en proceso de ser deprecados.
  • needsConfigModal (opcional): valor booleano que define si el plugin necesita un diálogo de configuración adicional. Por defecto es falso, pero si se le asigna el valor verdadero, entonces es necesario añadir el método getConfigTemplate al plugin para definir cómo es la interfaz de ese diálogo.
  • needsTextEdition (opcional): valor booleano usado para especificar si el plugin necesitará hacer uso de las herramientas proporcionadas para la edición de texto. Por defecto es falso. Si se le asigna el valor verdadero, aparecerá en el estado una propiedad "oculta" llamada "__text" que contendrá el texto del plugin. Es la única situación en la que un plugin puede no tener el método getRenderTemplate, ya que en caso de faltar, se genera automáticamente devolviendo el valor de __text.
  • aspectRatioButtonConfig (opcional): es un objeto que sirve para configurar el botón que bloquea la relación de aspecto al cambiar el tamaño de la caja creada con el plugin. Tiene dos propiedades, una "location" que es un array en el que se va especificando las claves de los distintos antecesores que va a tener en la barra de herramientas (pestaña, acordeón y subacordeón si existiera), y otra "defaultValue" que especifica si tiene que estar activo o no inicialmente (por defecto, no). Esta configuración cambiará a un valor booleano ya que se fijará la localización (["main", "structure"]). Ver plugin imagen como ejemplo.
  • needsPointerEventsAllowed (opcional): valor booleano que añade un atajo del plugin que permite manipular el plugin con el ratón en modo edición, en lugar de solo en visualización, facilitando así su configuración (ejemplo de uso: centrar y zoom mapa). Por defecto es falso.
  • limitToOneInstance (opcional): valor booleano que permite limitar a una instancia del plugin por página.
  • createFromLibrary (opcional): esta propiedad indica si se puede crear una instancia del plugin directamente desde la ventana de importación de contenidos. Se trata de un array cuyo primer valor indica el tipo MIME con el que está asociado este plugin y el segundo valor indica cuál es la parte del estado del plugin con la que está asociada ese tipo MIME. Por ejemplo, en el caso de las imágenes el valor que tomaría esta propiedad sería el siguiente: ['image/*', 'url'].
  • searchIcon (opcional): valor booleano que indica si se añade un atajo del plugin que permita cambiar fácilmente su contenido a través de a ventana de importación de contenido. Si ya se ha especificado el valor del tipo MIME y la parte del estado con la que está asociada el contenido en el apratado anterior, será suficiente con otorgarle a este campo el valor true. También se puede especificar un array con valores diferentes o escribir el string type.
  • isComplex (opcional): valor booleano que indica si este plugin puede contener instancias de otros plugins en su interior.

También en getConfig() se especifican los valores iniciales de ancho y alto. Las slides solo pueden tener plugins con medidas relativas(%) ya que escalan al tamaño de la pantalla.

  • initialWidth: Especifica el ancho inicial del plugin en los documentos. Si no se especifica, el valor por defecto es '20%'. Puede ser un valor en porcentaje, en píxeles o 'auto'.
  • initialHeight: Especfica el ancho inicial del plugin en los documentos. Si no se especifica, el valor por defecto es 'auto'. Puede ser un valor en porcentaje, en píxeles o 'auto'.
  • initialWidthSlide: Especifica el ancho inicial del plugin en las slides. Si no se especifica, el valor por defecto es initialWidth. Puede ser un valor en porcentaje o 'auto'. Es necesario especificarlo cuando ìnitialWidth se da en px.
  • initialHeightSlide: Especifica el alto inicial del plugin en las slides. Si no se especifica, el valor por defecto es initialHeight. Puede ser un valor en porcentaje o 'auto'. Es necesario especificarlo cuando ìnitialHeight se da en px.

Continúa en la sección Estado y barra de herramientas para seguir personalizando el plugin.

Clone this wiki locally