Toni Domènech | Ingeniero Informático, Automatización y Soluciones Digitales

el editor que está cambiando la forma de crear contenido en la web

Cuando hablamos de editores de texto para la web, lo normal es pensar en un “campo grande” tipo Word: escribes, das formato y listo. Editor.js le da la vuelta a ese concepto: en lugar de un documento de texto plano, te permite construir bloques independientes que luego se pueden reorganizar, enriquecer y exportar a JSON.

¿Qué es exactamente?

Editor.js es un editor open source en JavaScript que produce un JSON estructurado en lugar de HTML desordenado. Cada párrafo, imagen, vídeo o cita es un bloque. Esto facilita:

Guardar el contenido en base de datos sin tags extraños.
Renderizarlo donde quieras (web, app móvil, etc.).
Añadir o quitar tipos de bloques sin romper nada.

Ventajas que enamoran

Contenido limpio: obtienes datos puros, perfectos para APIs.
Experiencia modular: arrastra y suelta bloques, reordénalos como quieras.
Extensible: hay plugins para galerías, embeds, tablas… y puedes crear los tuyos.
Ligero y rápido: solo carga lo que necesitas.

Integración en tu proyecto PHP o JS

Instala con npm o carga desde CDN:
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
Inicializa:
const editor = new EditorJS({ holder: 'editorjs', tools: { header: { class: Header, inlineToolbar: true } } });
Guarda en tu base de datos:
editor.save().then((outputData) => { // outputData es JSON: guárdalo vía fetch/AJAX });

Ideas para tu web

Blog modular: almacena contenido estructurado para mostrar en web, app o boletines.
CMS ligero: combínalo con tu MVC en PHP para tener un editor moderno sin depender de WordPress.
Notas colaborativas: gracias a su formato JSON, es perfecto para apps en tiempo real.

Conclusión

Si buscas un editor que hable el idioma de las aplicaciones modernas (datos bien formateados, flexibilidad y UX limpia), Editor.js es una apuesta ganadora. En mi caso, ya lo estoy usando en el backoffice de mis proyectos para que los redactores trabajen sin pelearse con HTML.

EL EDITOR PERMITE UN CONJUNTO DE HERRAMIENTAS EXTRAS.

Embed Tool

Provides Block tool for embedded content for the Editor.js. Tool uses Editor.js pasted patterns handling and inserts iframe with embedded content.

List of services supported

service — is a service name that will be saved to Tool's output JSON

Facebook - facebook service
Instagram - instagram service
YouTube - youtube service
Twitter - twitter service. (official twitter api is used for render, no need to use twitframe)
Twitch - twitch-video service for videos and twitch-channel for channels
Miro - miro service
Vimeo — vimeo service
Gfycat — gfycat service
Imgur — imgur service
Vine - vine service. The project is in archive state now
Aparat - aparat service
Yandex.Music - yandex-music-track service for tracks, yandex-music-album for albums and yandex-music-playlist for playlists
Coub — coub service
CodePen — codepen service
Pinterest - pinterest service
GitHub Gist - github service
👇 Any other customized service

Installation

Get the package

yarn add @editorjs/embed

Include module at your application

import Embed from '@editorjs/embed';

Optionally, you can load this tool from CDN JsDelivr CDN

Usage

Add a new Tool to the tools property of the Editor.js initial config.

var editor = EditorJS({
  ...

  tools: {
    ...
    embed: Embed,
  },

  ...
});

Available configuration

Enabling / disabling services

Embed Tool supports some services by default (see above). You can specify services you would like to use:

var editor = EditorJS({
  ...

  tools: {
    ...
    embed: {
      class: Embed,
      config: {
        services: {
          youtube: true,
          coub: true
        }
      }
    },
  },

  ...
});

Note that if you pass services you want to use like in the example above, others will not be enabled.

Add more services

You can provide your own services using simple configuration.

First, you should create a Service configuration object. It contains following fields:

Example:

{
  regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/,
  embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2',
  html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
  height: 300,
  width: 600,
  id: (groups) => groups.join('/embed/')
}

When you create a Service configuration object, you can provide it with Tool`s configuration:

var editor = EditorJS({
  ...

  tools: {
    ...
    embed: {
      class: Embed,
      config: {
        services: {
          youtube: true,
          coub: true,
          codepen: {
            regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/,
            embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2',
            html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
            height: 300,
            width: 600,
            id: (groups) => groups.join('/embed/')
          }
        }
      }
    },
  },

  ...
});

Inline Toolbar

Editor.js provides useful inline toolbar. You can allow it`s usage in the Embed Tool caption by providing inlineToolbar: true.

var editor = EditorJS({
  ...

  tools: {
    ...
    embed: {
      class: Embed,
      inlineToolbar: true
    },
  },

  ...
});

Output data

{
  "type" : "embed",
  "data" : {
    "service" : "coub",
    "source" : "https://coub.com/view/1czcdf",
    "embed" : "https://coub.com/embed/1czcdf",
    "width" : 580,
    "height" : 320,
    "caption" : "My Life"
  }
}

El Blog de Toni Domenech

Editor js una libreria muy completa para publicar en JavaScript