editorjs html

editorjs-html

Una utilidad para analizar los datos de los editores de limpieza a HTML.

• Úselo con JavaScript/TypeScript simple, React, Angular, Vue o cualquier motor/marco de plantilla de su elección.
• Rápido, eficiente y liviano.
• Totalmente personalizable hasta el núcleo.
• Admite bloques básicos de editorjs que también son personalizables.
• Extiende para analizar sus propios bloques.

¿Qué hay de nuevo en V4?

• Reescribe completa, las últimas dependencias con cambios mínimos de API.
• Se eliminan las funciones redundantes parseStrict() y validate() .
• El modo estricto es configurable a través de opciones.
• Errores de la consola si las funciones de analizador para el bloque no son disponibles. El modo estricto arroja errores.
• El código es más legible, modular. Hará que sea más fácil contribuir y rastrear los cambios.
• Tipo de definiciones obtenidas directamente de Editor.js, por lo que el desarrollo se vuelve más fácil.
• Prueba unitaria con broma.

Instalación

Auto anfitrión, versiones precompiladas.

• Navegador - get /.build/edjshtml.browser.js

• Nodejs - get /.build/edjshtml.node.js

• Tanto para el navegador como para el nodo - get /.build/edjshtml.js

Npm

npm install editorjs-html

CDN

• https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.js
• (Solo navegador): https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.browser.js

Uso

Navegador

  const edjsParser = edjsHTML ( ) ;
  let html = edjsParser . parse ( editorjs_clean_data ) ;
  console . log ( html ) ;

Nodejs

  const edjsHTML = require ( "editorjs-html" ) ;
  const edjsParser = edjsHTML ( ) ;
  const html = edjsParser . parse ( editorjs_clean_data ) ;

  console . log ( html ) ; 

Actualizaciones

Ver lanzamientos

Documento

Tipos de bloques compatibles

• Encabezado (H1-H6)
• Listas (ordenadas y desordenadas)
• Listas anidadas
• Imagen
• Delimitador
• Párrafo
• Cita
• Código
• Empotrar

Analizar completo el objeto de datos de editorjs

  const edjsParser = edjsHTML ( ) ;
  const HTML = edjsParser . parse ( editorjs_data ) ;
  // returns array of html strings per block
  console . log ( HTML ) ; 

Analizar el objeto de datos de editorjs completo (modo estricto)

  const edjsParser = edjsHTML ( ) ;
  const HTML = edjsParser . parse ( editorjs_data ) ;
  // returns an error
  if ( HTML instanceof Error ) throw HTML ;

  // in case of success, returns an array of strings
  console . log ( HTML ) ; 

Paneque un solo bloque de datos de limpieza

  const edjsParser = edjsHTML ( ) ;
  const blockHTML = edjsParser . parseBlock ( editorjs_data_block ) ;
  // returns string of html for this block
  console . log ( blockHTML ) ; 

Modo estricto

  const edjsParser = edjsHTML ( { } , { strict : true } ) ;
  // returns the list of missing parser functions
  const blockHTML = edjsParser . parse ( editorjs_data ) ;
  console . log ( blockHTML ) ;

Extenderse para bloques personalizados

editorjs-html admite las funciones del analizador extensiones y anulantes para bloques.

  // Example Custom or Unrecognised Block
  {
    type : "custom" ,
    data : {
      text : "Hello World"
    }
 } 

  // Parse this block in editorjs-html
  function customParser ( block ) {
    return `<custom-tag> ${ block . data . text } </custom-tag>` ;
  }

  const plugins = {
    // The keyname must match with the type of block you want to parse with this funcion
    custom : customParser
    // ... add more or overwrite
  }

  const edjsParser =  edjsHTML ( plugins ) ; 

Contribución

Agregue un problema o abra un PR para cualquier error, revisión o sugerencia.

Nuevas funciones de analizador

1. Para funciones adicionales de analizador, agrégalas a parsers/block-name . Verifique las funciones existentes para obtener sugerencias.
2. La prueba de todo funcione bien, con pnpm test && pnpm build .
3. Abra un PR, para su revisión.
4. Agregue las pruebas en el directorio tests . Asegúrese de que sus pruebas pasen con la cobertura adecuada.

Sugerencias y recomendaciones

Me encantaría tener sus comentarios y cualquier sugerencia. También puede avisarme, si necesita soporte para más bloques EditorJS.

Apoyo

Si encuentra esto útil, considere darle a este repositorio una estrella. También puedes comprarme un café aquí

Licencia

Licencia pública del MIT

Autor

@pavittarx