Inicio>Recursos para la creación de sitios web>Otros recursos
Descargar

El último desarrollo está sucediendo en esta rama.

Media Draft - Demo

Un medio como el editor de texto rico se basó en Draft-JS con énfasis en eliminar el uso del mouse al agregar atajos de teclado relevantes.

Documentación en progreso.

Instale la versión beta usando

npm install medium-draft@beta

Características

  • Concéntrese en atajos de teclado y transformación automática de bloques de texto.
  • Adición de imagen con soporte para subtítulos de texto enriquecidos.
  • Minimizar el uso del mouse.
  • Autolistas.
  • Manejo adecuado de las prensas RETURN .
  • También tiene implementaciones de algunos bloques personalizados como:
    • caption : se puede usar como un subtítulo para bloques de medios como imagen o video en lugar de instancias draft-js anidadas por simplicidad.
    • block-quote-caption -Título para blockquote s.
    • todo - TODO TEXTO Con una casilla de verificación.
  • Barra de herramientas fácilmente personalizable a través de toolbarConfig para el siguiente bloque y estilos en línea. Predeterminado a todos. Distingue mayúsculas y minúsculas.
    • block: ['ordered-list-item', 'unordered-list-item', 'blockquote', 'header-three', 'todo']
    • inline: ['BOLD', 'ITALIC', 'UNDERLINE', 'hyperlink', 'HIGHLIGHT']
Los siguientes son los atajos de teclado para alternar los tipos de bloques ( ALT y CTRL para Windows/Linux y Opción y comando para OSX)

  • Alt/Opción +

    • 1 - Alternar el elemento de la lista ordenada
    • * - Alternar el elemento de la lista desordenada
    • # - Alternar encabezado -tres.
    • < - Bloque de subtítulos.
    • > - Alternar el bloque sin estilo o el párrafo.
    • H - Selección destacada.
Otros atajos
  • CMD/CTRL + K -> Agregar enlace
  • CMD/CTRL + Shift + K -> Eliminar el enlace si el cursor está dentro de una palabra con enlace.
Comandos de nivel de editor

Estos comandos no son parte del editor central, pero se han implementado en el código de ejemplo que usa el editor medium-draft .

  • Comando/CTRL + S - Guarde los datos actuales en localstorage .
  • Alt + Shift + L - Carga de datos previamente guardados de localstorage .
Caracteres especiales Al escribir: mientras se escribe en un bloque vacío, si el contenido coincide con uno de los siguientes, el tipo y el aspecto de ese bloque en particular se cambiarán al bloque correspondiente especificado a continuación
  • -- el bloque de corriente es blockquote , se cambiará a la caption block-quote-caption , de lo contrario.
  • *. (An asterisk and a period) unordered-list-item .
  • *<SPACE> (An asterisk and a space) unordered-list-item .
  • -<SPACE> (A hyphen and a space) unordered-list-item .
  • 1. (The number 1 and a period) unordered-list-item .
  • ## - header-two .
  • [] - todo .
  • == - unstyled .

Instalación

  • NPM .
    • npm install medium-draft .
    • import Editor from 'medium-draft'
  • Navegador
    • Incluir <link rel="stylesheet" type="text/css" href="https://unpkg.com/medium-draft/dist/medium-draft.css"> <head>
    • Incluya <script src="https://unpkg.com/medium-draft/dist/medium-draft.js"></script> . Medium-Draft está disponible en el objeto global como MediumDraft .

Uso

medium-draft se encuentra en la parte superior de draft-js con algunas funcionalidades y bloques incorporados. Su API es casi la misma que la de draft-js . Puede echar un vistazo al código del editor de demostración para ver la implementación.

CSS

Incluya el CSS que viene con la biblioteca en su HTML - 

 < link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/medium-draft.css " >

Si está utilizando webpack para Bundling, puede importar el CSS como este en su código JS 

 import 'medium-draft/lib/index.css' ;

Si está utilizando sideButtons , también deberá incluir el CSS para font-awesome - 

 < link rel =" stylesheet " href =" //maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css " >

o algo equivalente.

JS (ES6)

Como mínimo, debe proporcionar accesorios editorState y onChange , lo mismo que draft-js . 

 import React from 'react' ;
import ReactDOM from 'react-dom' ;

// if using webpack
// import 'medium-draft/lib/index.css';

import {
  Editor ,
  createEditorState ,
} from 'medium-draft' ;

class App extends React . Component {
  constructor ( props ) {
    super ( props ) ;

    this . state = {
      editorState : createEditorState ( ) , // for empty content
    } ;

    /*
    this.state = {
      editorState: createEditorState(data), // with content
    };
    */

    this . onChange = ( editorState ) => {
      this . setState ( { editorState } ) ;
    } ;

    this . refsEditor = React . createRef ( ) ;

  }

  componentDidMount ( ) {
    this . refsEditor . current . focus ( ) ;
  }

  render ( ) {
    const { editorState } = this . state ;
    return (
      < Editor
        ref = { this . refsEditor }
        editorState = { editorState }
        onChange = { this . onChange } />
    ) ;
  }
} ;

ReactDOM . render (
  < App /> ,
  document . getElementById ( 'app' )
) ;

Personalización de botones laterales

Editor de medium-draft acepta un accesorio llamado sideButtons . Por defecto, solo hay un botón (de imagen), pero puede agregar más. El accesorio sideButtons debe ser una matriz de objetos con cada objeto que tenga la siguiente firma: 

 {
  "title" : "unique-button-name" ,
  "component" : ButtonComponent
}

Por ejemplo: 

 {
  "title" : "Image" ,
  "component" : ImageSideButton
}

Código de ejemplo:

En este momento, el botón de imagen simplemente agrega una imagen dentro del editor usando URL.createObjectURL . Pero si desea cargar primero la imagen a su servidor y luego agregar esa imagen al editor, puede seguir uno de los 2 métodos:

  1. Extienda el componente de ImageSideButton predeterminado que viene con medium-draft .

  2. O cree su propio componente con la funcionalidad completa usted mismo.

Para simplificar, seguiremos el primer método. Si estudia la implementación de ImageSideButton , verá un método onChange que recibe el evento de selección de archivos donde los archivos seleccionados están disponibles como event.target.files . Simplemente anularemos este método ya que no queremos personalizar nada más. También tenga en cuenta que cada componente del botón lateral recibe la función getEditorState (devuelve el borrador editorState ), la función setEditorState(newEditorState) (establece el nuevo editorState) y la función close que debe llamar manualmente para cerrar la lista de botones laterales: 

 import React from 'react' ;
import {
  ImageSideButton ,
  Block ,
  addNewBlock ,
  createEditorState ,
  Editor ,
} from 'medium-draft' ;
import 'isomorphic-fetch' ;

class CustomImageSideButton extends ImageSideButton {

  /*
  We will only check for first file and also whether
  it is an image or not.
  */
  onChange ( e ) {
    const file = e . target . files [ 0 ] ;
    if ( file . type . indexOf ( 'image/' ) === 0 ) {
      // This is a post request to server endpoint with image as `image`
      const formData = new FormData ( ) ;
      formData . append ( 'image' , file ) ;
      fetch ( '/your-server-endpoint' , {
        method : 'POST' ,
        body : formData ,
      } ) . then ( ( response ) => {
        if ( response . status === 200 ) {
          // Assuming server responds with
          // `{ "url": "http://example-cdn.com/image.jpg"}`
          return response . json ( ) . then ( data => {
            if ( data . url ) {
              this . props . setEditorState ( addNewBlock (
                this . props . getEditorState ( ) ,
                Block . IMAGE , {
                  src : data . url ,
                }
              ) ) ;
            }
          } ) ;
        }
      } ) ;
    }
    this . props . close ( ) ;
  }

}

// Now pass this component instead of default prop to Editor example above.
class App extends React . Component {
  constructor ( props ) {
    super ( props ) ;

    this . sideButtons = [ {
      title : 'Image' ,
      component : CustomImageSideButton ,
    } ] ;

    this . state = {
      editorState : createEditorState ( ) , // for empty content
    } ;

    /*
    this.state = {
      editorState: createEditorState(data), // with content
    };
    */

    this . onChange = ( editorState ) => {
      this . setState ( { editorState } ) ;
    } ;

    this . refsEditor = React . createRef ( )

  }

  componentDidMount ( ) {
    this . refsEditor . current . focus ( ) ;
  }

  render ( ) {
    const { editorState } = this . state ;
    return (
      < Editor
        ref = { this . refsEditor }
        editorState = { editorState }
        onChange = { this . onChange }
        sideButtons = { this . sideButtons }
      />
    ) ;
  }
} ;

Eliminar botones laterales

Para eliminar por completo los botones laterales, de modo que el botón Circular Agregar nunca aparezca, simplemente pase una matriz vacía:

sideButtons={[]}

Barra de herramientas de personalización

Hay tres accesorios que puede usar para personalizar los botones en la barra de herramientas que aparece cada vez que selecciona texto dentro del editor:

  • blockButtons
  • inlineButtons
  • toolbarConfig

Los botones de editor de nivel de bloque predeterminado son ['header-three', 'unordered-list-item', 'ordered-list-item', 'blockquote', 'todo'] y los botones predeterminados del editor en línea ['BOLD', 'ITALIC', 'UNDERLINE', 'HIGHLIGHT', 'hyperlink'] .

Por ejemplo, si desea mantener los botones de bloque predeterminados y agregar algunos más, puede hacer algo como lo siguiente: 

 import { BLOCK_BUTTONS } from 'medium-draft' ;

const blockButtons = [ {
    label : 'H1' ,
    style : 'header-one' ,
    icon : 'header' ,
    description : 'Heading 1' ,
  } ,
  {
    label : 'H2' ,
    style : 'header-two' ,
    icon : 'header' ,
    description : 'Heading 2' ,
} ] . concat ( BLOCK_BUTTONS ) ;

// in your component
< Editor blockButtons = { blockButtons } . . . / >

Si desea eliminar algunos botones o reordenarlos , puede usar funciones como array.slice en el BLOCK_BUTTONS predeterminado e INLINE_BUTTONS , pero esto probablemente sea más problemas de lo que vale.

Para este propósito, es mejor usar el apoyo de toolbarConfig : 

 // custom ordering for block and inline buttons, and removes some buttons
const toolbarConfig = {
  block : [ 'unordered-list-item' , 'header-one' , 'header-three' ] ,
  inline : [ 'BOLD' , 'UNDERLINE' , 'hyperlink' ] ,
}

< Editor toolbarConfig = { toolbarConfig } . . . / >

Las cadenas dentro del block y las matrices inline deben coincidir con el atributo style dentro de blockButtons y las matrices inlineButtons .

Para resumir: si necesita agregar, eliminar y reordenar los botones, probablemente sea más fácil usar blockButtons , inlineButtons y toolbarConfig juntos.

Suministra tu propia barra de herramientas

Si los accesorios de personalización de la barra de herramientas no son suficientes para obtener el comportamiento que desea, puede inyectar su propia barra de herramientas con el accesorio de ebarcomponent ToolbarComponent .

Este patrón se llama inyección de componentes. Su ToolbarComponent recibe los mismos accesorios que la barra de herramientas predeterminada.

Si desea escribir su propio componente de la barra de herramientas, un buen lugar para comenzar es con el componente predeterminado.

Renderizar datos a HTML

La función para exportar HTML está disponible en la versión 0.4.1 en adelante.

medium-draft utiliza la conversión de draft (que a su vez usa React-Dom-Server) para convertir editorState del Editor de draft-js a HTML.

El exportador no es parte de la biblioteca central. Si desea utilizar medium-draft-exporter , siga estos pasos-

Browserify/Webpack

  • npm install draft-convert .

draft-convert es parte de peerDependencies de medium-draft .

Código 
  import mediumDraftExporter from 'medium-draft/lib/exporter' ;
  const editorState = /* your draft editorState */ ;
  const renderedHTML = mediumDraftExporter ( editorState . getCurrentContent ( ) ) ;
  /* Use renderedHTML */

Navegador

  • Agregue los siguientes scripts antes de su código JS. 
 < script src =" https://unpkg.com/[email protected]/dist/react-dom-server.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/dist/draft-convert.min.js " > </ script >
< script src =" https://unpkg.com/medium-draft/dist/medium-draft-exporter.js " > </ script >

El exportador está disponible como MediumDraftExporter Global;

  • Js 
 var mediumDraftExporter = MediumDraftExporter . default ;
const editorState = /* your draft editorState */ ;
const renderedHTML = mediumDraftExporter ( editorState . getCurrentContent ( ) ) ;
/* Use renderedHTML */

El medium-draft-exporter también viene con un CSS preestablecido si desea aplicar algunos estilos básicos al HTML renderizado.

  • En Webpack, como parte de su página de HTML renderizada, use esto- 

     import 'medium-draft/lib/basic.css'

  • En el navegador, en su página de HTML renderizada, puede incluir este enlace de hoja de estilo 

     < link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/basic.css " >

Cargar HTML exportado utilizando medium-draft-exporter a editorState

La función para exportar HTML está disponible en la versión 0.5.3 en adelante.

medium-draft utiliza la conversión de draft (que a su vez usa React-Dom-Server) para convertir editorState del Editor de draft-js a HTML.

El importador no es parte de la biblioteca central. Si desea utilizar medium-draft-importer , siga estos pasos-

Browserify/Webpack

  • npm install draft-convert .

draft-convert es parte de peerDependencies de medium-draft .

Código 
  import { convertToRaw } from 'draft-js' ;
  import { createEditorState } from 'medium-draft' ;
  import mediumDraftImporter from 'medium-draft/lib/importer' ;

  const html = /* your previously exported html */ ;
  const editorState = createEditorState ( convertToRaw ( mediumDraftImporter ( html ) ) ) ;
  // Use this editorState

Navegador

  • Agregue los siguientes scripts antes de su código JS. 
 < script src =" https://unpkg.com/[email protected]/dist/react-dom-server.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/dist/draft-convert.min.js " > </ script >
< script src =" https://unpkg.com/medium-draft/dist/medium-draft-importer.js " > </ script >

El importador está disponible como MediumDraftImporter Global;

  • Js 
  const { convertToRaw } = Draft ;
  const { createEditorState } = MediumDraft ;
  const mediumDraftImporter = MediumDraftImporter . default ;
  const html = /* your previously exported html */ ;
  const editorState = createEditorState ( convertToRaw ( mediumDraftImporter ( html ) ) ) ;
  // Use this editorState

Asuntos

  • Escriba un exportador para exportar los datos de borrador a HTML específicamente para medium-draft .
  • Encuentre una forma de mostrar el texto del marcador de posición para obtener subtítulos de imagen vacíos.
  • Actualmente, la barra de herramientas que aparece cuando se selecciona el texto debe solucionarse con respecto a su posición en la ventana gráfica.

Revelador

  • Clone Este repositorio git clone https://github.com/brijeshb42/medium-draft.git .
  • Instalar paquetes de nodo npm install react react-dom draft-convert && npm install .
  • Inicie la demostración local npm run dev . Esto iniciará un servidor local en el puerto 8080 .
  • Construir usando npm run build .

LICENCIA

MIT

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo