API del editor de publicaciones

El editor de publicaciones de Publii se basa en el editor TinyMCE y le permite agregar algunas modificaciones según el tema utilizado o anulaciones de configuración.

Estilos CSS del editor de publicaciones personalizado

Para brindar la mejor experiencia a los usuarios del tema, los desarrolladores del tema pueden querer agregar estilos CSS personalizados al editor de publicaciones. Si desea agregar estilos CSS personalizados, simplemente cree un 

El archivo assets/css/editor.css de tu tema. Ese archivo se cargará después del archivo CSS del editor de publicaciones predeterminado, por lo que podrás anular cualquier regla CSS predeterminada del editor de publicaciones.

Cambiar la configuración predeterminada del editor de publicaciones

Siempre intentamos crear las mejores soluciones para la mayoría de los usuarios de Publii, pero entendemos que el editor de publicaciones es una herramienta compleja y que las necesidades de los usuarios pueden ser muy diferentes. Por eso, permitimos que los usuarios anulen la configuración predeterminada de TinyMCE mediante un archivo de configuración personalizado o scripts JS personalizados . 

Formatos personalizados

Los desarrolladores de temas pueden agregar formatos personalizados que les permiten crear estructuras HTML personalizadas que se pueden insertar fácilmente en el editor de publicaciones. Estos formatos están disponibles en la lista desplegable "Formatos" de la interfaz de usuario del editor de publicaciones y también en la barra de herramientas en línea del editor de publicaciones en la lista desplegable "Seleccionar estilo".

Para agregar formatos personalizados a su tema, simplemente cree en el archivo config.json del tema un campo llamado "customElements".

Ejemplo de campo customElements que crea cuatro formatos personalizados: "Información", "Resaltado", "Éxito" y "Letra capital": 

"customElements": [
    {
        "label": "Info",
        "cssClasses": "msg msg--info",
        "selector": "p"
    },
    {
        "label": "Highlight",
        "cssClasses": "msg msg--highlight ",
        "selector": "p"
    },
    {
        "label": "Success",
        "cssClasses": "msg msg--success",
        "selector": "p"
    },
    {
        "label": "Drop cap",
        "cssClasses": "dropcap",
        "selector": "p"
    }
]
Copiar

Como puede ver, cada elemento de formato personalizado está representado por un objeto que contiene tres campos:

  • etiqueta : es un nombre de formato que se muestra en las listas desplegables en el editor de publicaciones,
  • cssClasses : es una lista de clases CSS utilizadas en el elemento inyectado; puede aplicarles estilo en el archivo editor.css personalizado descrito anteriormente.
  • selector : es un nombre de etiqueta utilizado para envolver el contenido del formato personalizado.

También es posible limitar la visibilidad de los formatos personalizados a editores específicos. 

Publii utiliza el editor TinyMCE en dos lugares: en el editor de publicaciones y en la configuración del tema. Utiliza dos campos adicionales para las definiciones de formatos personalizados:

  • postEditor : si es verdadero, permitirá que el formato personalizado se muestre en el editor de publicaciones.
  • themeSettings : si es verdadero, permitirá que el formato personalizado se muestre en los editores WYSIWYG de configuración del tema.

Puedes especificar dónde se mostrarán:

"customElements": [
    {
        "label": "Info", 
        "cssClasses": "msg msg--info",
        "selector": "p",
        "postEditor": true, // will display under post editor
        "themeSettings": false // won't display under theme settings
    },
    {
        "label": "Highlight",
        "cssClasses": "msg msg--highlight ",
        "selector": "p",
        "postEditor": false, // won't display under post editor
        "themeSettings": true // will display under theme settings
    },
    {
        "label": "Success",
        "cssClasses": "msg msg--success",
        "selector": "p",
        "postEditor": false // won't display under post editor and theme settings
    },
    {
        "label": "Drop cap",
        "cssClasses": "dropcap",
        "selector": "p",
        "themeSettings": true // will display under post editor and theme settings as postEditor when not exists is treated as true
    }
]
Copiar

El valor predeterminado para el campo postEditor es true . Para el campo themeSettings , el valor predeterminado es false . Esto significa que los formatos personalizados sin estos valores definidos se mostrarán solo en el editor de publicaciones.

arriba