Page d'accueil>Ressources de création de sites Web>Autres ressources
Télécharger

Le dernier développement se déroule dans cette branche.

Demo moyen - Demo

Un éditeur de texte riche comme le riche construit sur Draft-Js en mettant l'accent sur l'élimination de l'utilisation de la souris en ajoutant des raccourcis clavier pertinents.

Documentation en cours.

Installez la version bêta en utilisant

npm install medium-draft@beta

Caractéristiques

  • Concentrez-vous sur les raccourcis clavier et la transformation automatique des blocs de texte.
  • Ajout d'image avec support pour le sous-titrage de texte riche.
  • Minimiser l'utilisation de la souris.
  • Autolistes.
  • Manipulation appropriée des pressions RETURN .
  • Il a également des implémentations de certains blocs personnalisés comme:
    • caption - peut être utilisée comme une légende pour les blocs multimédias comme l'image ou la vidéo au lieu des instances draft-js imbriquées pour la simplicité.
    • block-quote-caption - Légende pour blockquote s.
    • todo - Todo Text avec une case à cocher.
  • Barbaire d'outils facilement personnalisable via toolbarConfig pour les styles de bloc et de ligne suivants. Par défaut à tous. Sensible aux majuscules et minuscules.
    • block: ['ordered-list-item', 'unordered-list-item', 'blockquote', 'header-three', 'todo']
    • inline: ['BOLD', 'ITALIC', 'UNDERLINE', 'hyperlink', 'HIGHLIGHT']
Voici les raccourcis clavier pour basculer les types de blocs ( Alt et Ctrl pour Windows / Linux et l'option et la commande pour OSX)

  • Alt / option +

    • 1 - Élément de liste commandée pour basculer
    • * - basculer l'élément de liste non ordonnée
    • # - Basculez en tête-trois.
    • < - Bloc de légende de bascule.
    • > - Basciller non style ou bloc de paragraphe.
    • H - Sélection de mise en évidence.
Autres raccourcis
  • Cmd / ctrl + k -> ajouter le lien
  • CMD / CTRL + SHIFT + K -> Supprimer le lien si le curseur est à l'intérieur d'un mot avec lien.
Commandes de niveau de l'éditeur

Ces commandes ne font pas partie de l'éditeur de base mais ont été implémentées dans l'exemple de code qui utilise l'éditeur medium-draft .

  • Commande / Ctrl + S - Enregistrez les données actuelles sur localstorage .
  • Alt + Shift + L - Chargez les données précédemment enregistrées de localstorage .
Caractères spéciaux lors de la saisie: lors de la saisie d'un bloc vide, si le contenu correspond à l'un des éléments suivants, ce type et l'apparence de ce bloc particulier seront modifiés en bloc correspondant spécifié ci-dessous
  • -- - Si le bloc actuel est blockquote , il sera changé en block-quote-caption , caption else.
  • *. (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 .

Installation

  • NPM .
    • npm install medium-draft .
    • import Editor from 'medium-draft'
  • Navigateur
    • Inclut <link rel="stylesheet" type="text/css" href="https://unpkg.com/medium-draft/dist/medium-draft.css"> dans <head>
    • Inclut <script src="https://unpkg.com/medium-draft/dist/medium-draft.js"></script> . Le rouage moyen est disponible dans l'objet global sous forme MediumDraft .

Usage

medium-draft se trouve au-dessus du draft-js avec certaines fonctionnalités et blocs intégrés. Son API est presque la même que celle de draft-js . Vous pouvez jeter un œil au code de l'éditeur de démonstration pour voir l'implémentation.

CSS

Incluez le CSS fourni avec la bibliothèque de votre HTML - 

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

Si vous utilisez webpack pour le regroupement, vous pouvez importer le CSS comme celui-ci dans votre code JS 

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

Si vous utilisez sideButtons , vous devrez également inclure le CSS pour font-awesome - 

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

ou quelque chose d'équivalent.

JS (ES6)

Au minimum, vous devez fournir des accessoires editorState et onChange , identiques à 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' )
) ;

Personnalisation des boutons latéraux

L' Editor de medium-draft accepte un accessoire appelé sideButtons . Par défaut, il n'y a qu'un seul bouton (image), mais vous pouvez en ajouter plus. L'hélice sideButtons doit être un tableau d'objets avec chaque objet ayant la signature suivante: 

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

Pour ex: 

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

Exemple de code:

À l'heure actuelle, le bouton d'image ajoute simplement une image à l'intérieur de l'éditeur à l'aide URL.createObjectURL . Mais si vous souhaitez d'abord télécharger l'image sur votre serveur, puis ajouter cette image à l'éditeur, vous pouvez suivre l'une des 2 méthodes:

  1. Étendez le composant ImageSideButton par défaut qui est livré avec medium-draft .

  2. Ou créez vous-même votre propre composant avec la fonctionnalité complète.

Pour plus de simplicité, nous suivrons la première méthode. Si vous étudiez la mise en œuvre de ImageSideButton , vous verrez une méthode onChange qui reçoit l'événement de sélecteur de fichiers où les fichiers sélectionnés sont disponibles en tant event.target.files . Nous allons simplement remplacer cette méthode car nous ne voulons rien personnaliser d'autre. Notez également que chaque composant du bouton latéral reçoit la fonction getEditorState (renvoie le projet editorState ), setEditorState(newEditorState) (Définit le nouveau EditorState) et close la fonction que vous devez appeler manuellement pour fermer la liste des boutons latéraux: 

 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 }
      />
    ) ;
  }
} ;

Retrait des boutons latéraux

Pour retirer entièrement les boutons latéraux, afin que le bouton d'ajout circulaire n'apparaisse jamais, passez simplement un tableau vide:

sideButtons={[]}

Personnalisation de la barre d'outils

Il existe trois accessoires que vous pouvez utiliser pour personnaliser les boutons de la barre d'outils qui apparaît chaque fois que vous sélectionnez du texte dans l'éditeur:

  • blockButtons
  • inlineButtons
  • toolbarConfig

Les boutons de l'éditeur de niveau de bloc par défaut sont ['header-three', 'unordered-list-item', 'ordered-list-item', 'blockquote', 'todo'] , et les boutons d'éditeur en ligne par défaut ['BOLD', 'ITALIC', 'UNDERLINE', 'HIGHLIGHT', 'hyperlink'] .

Par exemple, si vous souhaitez conserver les boutons de bloc par défaut et en ajouter quelques autres, vous pouvez faire quelque chose comme ce qui suit: 

 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 vous souhaitez supprimer certains boutons ou les réorganiser , vous pouvez utiliser des fonctions comme array.slice sur le BLOCK_BUTTONS par défaut et INLINE_BUTTONS , mais cela est probablement plus difficile que cela en vaut la peine.

À cette fin, il est préférable d'utiliser l'hélice 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 } . . . / >

Les chaînes à l'intérieur du block et des tableaux inline doivent correspondre à l'attribut de style à l'intérieur blockButtons et des tableaux inlineButtons .

Pour résumer: si vous avez besoin d'ajouter, de supprimer et de réorganiser les boutons, il est probablement plus facile d'utiliser blockButtons , inlineButtons et toolbarConfig ensemble.

Fournissez votre propre barre d'outils

Si les accessoires de personnalisation de la barre d'outils ne sont pas suffisants pour obtenir le comportement que vous souhaitez, vous pouvez injecter votre propre barre d'outils avec l'hélice ToolbarComponent .

Ce modèle est appelé injection de composants. Votre ToolbarComponent reçoit les mêmes accessoires que la barre d'outils par défaut.

Si vous souhaitez rédiger votre propre composant de barre d'outils, un bon point de démarrage est avec le composant par défaut.

Rendre les données à HTML

La fonctionnalité pour exporter HTML est disponible à partir de la version 0.4.1 .

medium-draft utilise le convertissement à Draft (qui utilise à son tour React-Dom-Server) pour rendre HTML de editorState draft-js .

L'exportateur ne fait pas partie de la bibliothèque de base. Si vous souhaitez utiliser medium-draft-exporter , suivez ces étapes -

Browserify / webpack

  • npm install draft-convert .

draft-convert fait partie des peerDependencies du medium-draft .

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

Navigateur

  • Ajoutez les scripts suivants avant votre code 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 >

L'exportateur est disponible sous forme MediumDraftExporter global;

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

L' medium-draft-exporter est également livré avec un CSS prédéfini si vous souhaitez appliquer des styles de base au HTML rendu.

  • Dans WebPack, dans le cadre de la page de votre HTML rendu, utilisez ce 

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

  • Dans le navigateur, dans votre page HTML rendue, vous pouvez inclure ce lien de feuille de style 

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

Chargez HTML exporté à l'aide de medium-draft-exporter à editorState

La fonctionnalité pour exporter HTML est disponible à partir de la version 0.5.3 .

medium-draft utilise le convertissement à Draft (qui utilise à son tour React-Dom-Server) pour rendre HTML de editorState draft-js .

L'importateur ne fait pas partie de la bibliothèque de base. Si vous souhaitez utiliser medium-draft-importer , suivez ces étapes -

Browserify / webpack

  • npm install draft-convert .

draft-convert fait partie des peerDependencies du medium-draft .

Code 
  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

Navigateur

  • Ajoutez les scripts suivants avant votre code 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 >

L'importateur est disponible en tant que 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

Problèmes

  • Écrivez un exportateur pour exporter des rédactions de données vers HTML spécifiquement pour medium-draft .
  • Trouvez un moyen de montrer du texte d'espace réservé pour les légendes d'image vides.
  • Actuellement, la barre d'outils qui apparaît lorsque le texte est sélectionné doit être corrigé concernant sa position dans la fenêtre.

Promoteur

  • Clone Ce repo git clone https://github.com/brijeshb42/medium-draft.git .
  • Installez les packages de nœuds npm install react react-dom draft-convert && npm install .
  • Démarrez npm run dev . Cela démarrera un serveur local sur le port 8080 .
  • Construire en utilisant npm run build .

LICENCE

Mit

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout