Startseite>Ressourcen zum Erstellen von Websites>Andere Ressourcen
Herunterladen

Die neueste Entwicklung in dieser Filiale wird durchgeführt.

Mitteltreue - Demo

Ein Medium wie ein reichhaltiger Texteditor, der auf Draft-Js aufgebaut ist und der Schwerpunkt auf der Beseitigung der Mausnutzung durch Hinzufügen relevanter Tastaturverknüpfungen liegt.

Dokumentation in Arbeit.

Installieren Sie die Beta -Version mithilfe

npm install medium-draft@beta

Merkmale

  • Konzentrieren Sie sich auf Tastaturverknüpfungen und automatische Transformation von Textblöcken.
  • Bildzusatz mit Unterstützung für reichhaltige Textunterschriften.
  • Minimieren Sie die Nutzung der Maus.
  • Autolisten.
  • Richtige Handhabung von RETURN .
  • Es gibt auch Implementierungen einiger benutzerdefinierter Blöcke wie:
    • caption - kann als Bildunterschrift für Medienblöcke wie Image oder Video anstelle von verschachtelten draft-js -Instanzen zur Einfachheit verwendet werden.
    • block-quote-caption -Bildunterschrift für blockquote s.
    • todo - TODO -Text mit einem Kontrollkästchen.
  • Einfach anpassbare Symbolleiste über toolbarConfig für den folgenden Block und den Inline -Stil. Standardmäßig an alle. Fallempfindlichkeit.
    • block: ['ordered-list-item', 'unordered-list-item', 'blockquote', 'header-three', 'todo']
    • inline: ['BOLD', 'ITALIC', 'UNDERLINE', 'hyperlink', 'HIGHLIGHT']
Im Folgenden finden Sie die Tastaturverknüpfungen zum Umschalten der Blocktypen ( ALT und Strg für Windows/Linux und Option und Befehl für OSX).

  • Alt/Option +

    • 1 - Umschaltungslistenelement umschalten
    • * - Umkippen Sie das nicht ordnungsgemäße Listenelement
    • # - Header umschalten - drei.
    • < - Umschüttungsunterschrift Block.
    • > - Umschütteln Sie nicht styled oder Absatzblock.
    • H - Auswahl hervorheben.
Andere Abkürzungen
  • CMD/Strg + K -> Link hinzufügen
  • CMD/Strg + Shift + K -> Link entfernen, wenn sich Cursor in einem Wort mit Link befindet.
Befehle der Editorebene

Diese Befehle sind nicht Teil des Kerneditors, sondern wurden in dem Beispielcode implementiert, der den Editor medium-draft verwendet.

  • Befehl/STRG + S - Die aktuellen Daten in localstorage speichern.
  • ALT + SHIFT + L - LADEN SIE EHMER VERPARTED DATEN VON localstorage .
Sonderzeichen beim Eingeben: Während des Eingebens in einen leeren Block wird der Typ und das Aussehen dieses Blocks in den unten angegebenen Block geändert
  • -- der aktuelle Block blockquote ist, wird er in block-quote-caption geändert, sonst caption .
  • *. (An asterisk and a period) -Nicht unordered-list-item .
  • *<SPACE> (An asterisk and a space) -Nicht 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'
  • Browser
    • Integrieren <link rel="stylesheet" type="text/css" href="https://unpkg.com/medium-draft/dist/medium-draft.css"> in <head>
    • Integrieren <script src="https://unpkg.com/medium-draft/dist/medium-draft.js"></script> . Medium-Draft ist im globalen Objekt als MediumDraft erhältlich.

Verwendung

medium-draft sitzt mit einigen integrierten Funktionen und Blöcken auf draft-js . Seine API ist fast die gleiche wie die von draft-js . Sie können sich den Code des Demo -Editors ansehen, um die Implementierung anzuzeigen.

CSS

Fügen Sie die CSS ein, die mit der Bibliothek in Ihrem HTML - geliefert werden - 

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

Wenn Sie webpack zum Bündelling verwenden, können Sie die CSS wie diese in Ihrem JS -Code importieren 

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

Wenn Sie sideButtons verwenden, müssen Sie auch die CSS für font-awesome einbeziehen - 

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

oder etwas Äquivalentes.

JS (ES6)

Zumindest müssen Sie editorState und onChange Requisiten bereitstellen, die wie 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' )
) ;

Anpassen von Seitenknöpfen

Der Editor von medium-draft akzeptiert eine Requisite namens sideButtons . Standardmäßig gibt es nur eine (Bild-) Schaltfläche, aber Sie können mehr hinzufügen. Die sideButtons -Stütze muss ein Array von Objekten sein, wobei jedes Objekt die folgende Signatur hat: 

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

Für Ex: 

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

Beispielcode:

Im Moment fügt die Bildschaltfläche einfach ein Bild im Editor mit URL.createObjectURL hinzu. Wenn Sie das Bild zuerst auf Ihren Server hochladen und das Bild dem Editor hinzufügen möchten, können Sie einer der beiden Methoden folgen:

  1. Entweder erweitern Sie die Standard ImageSideButton -Komponente, die mit medium-draft geliefert wird.

  2. Oder erstellen Sie Ihre eigene Komponente mit der vollständigen Funktionalität selbst.

Der Einfachheit halber werden wir der ersten Methode folgen. Wenn Sie die Implementierung von ImageSideButton untersuchen, sehen Sie eine onChange -Methode, die das Datei -Chooser -Ereignis empfängt, bei dem die Seleced -Dateien als event.target.files verfügbar sind. Wir werden diese Methode einfach überschreiben, da wir nichts anderes anpassen möchten. Beachten Sie außerdem, dass jede Button -Komponente die getEditorState -Funktion empfängt (zurückgibt die Funktion des Draft editorState ), der Funktion setEditorState(newEditorState) (legt die neue Editorstate fest) und close die Funktion, die Sie manuell anrufen müssen, um die Liste der Seitenschaltflächen zu schließen: 

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

Seitenknöpfe entfernen

Um die Seitenknöpfe vollständig zu entfernen, damit die kreisförmige Taste nicht angezeigt wird, übergeben Sie einfach ein leeres Array:

sideButtons={[]}

Anpassung der Symbolleiste

Es gibt drei Requisiten, mit denen Sie die Schaltflächen in der Symbolleiste anpassen können, die angezeigt werden, wenn Sie Text im Editor auswählen:

  • blockButtons
  • inlineButtons
  • toolbarConfig

Die standardmäßigen Block-Level-Editor-Schaltflächen sind ['header-three', 'unordered-list-item', 'ordered-list-item', 'blockquote', 'todo'] und die Standard-Inline-Editor-Schaltflächen ['BOLD', 'ITALIC', 'UNDERLINE', 'HIGHLIGHT', 'hyperlink'] .

Wenn Sie beispielsweise die Standardblocktasten beibehalten und ein paar weitere hinzufügen möchten, können Sie so etwas wie folgt tun: 

 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 } . . . / >

Wenn Sie einige Tasten entfernen oder neu ordnen möchten, können Sie Funktionen wie array.slice auf den Standard BLOCK_BUTTONS und INLINE_BUTTONS verwenden, aber dies ist wahrscheinlich mehr Probleme als es wert ist.

Zu diesem Zweck ist es besser, die toolbarConfig Prop zu verwenden: 

 // 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 } . . . / >

Die Saiten im block und inline -Arrays müssen mit dem style -Attribut in blockButtons und inlineButtons -Arrays übereinstimmen.

Zusammenfassend: Wenn Sie Tasten hinzufügen, entfernen und neu ordnen müssen, ist es wahrscheinlich am einfachsten, blockButtons , inlineButtons und toolbarConfig zusammen zu verwenden.

Liefern Sie Ihre eigene Symbolleiste

Wenn die Anpassungsrequisiten der Symbolleiste nicht ausreichen, um das gewünschte Verhalten zu erhalten, können Sie eine eigene Symbolleiste in die ToolbarComponent -Requisite injizieren.

Dieses Muster wird als Komponenteninjektion bezeichnet. Ihre ToolbarComponent empfängt die gleichen Requisiten wie die Standard -Symbolleiste.

Wenn Sie Ihre eigene Symbolleistekomponente schreiben möchten, ist ein guter Startplatz mit der Standardkomponente.

Daten in HTML rendern

Die Funktion zum Exportieren von HTML ist ab Version 0.4.1 erhältlich.

medium-draft verwendet Draft-Convert (was wiederum React-Dom-Server verwendet), um editorState von draft-js auf HTML zu bringen.

Der Exporteur ist nicht Teil der Kernbibliothek. Wenn Sie medium-draft-exporter verwenden möchten, befolgen Sie diese Schritte-

Browserify/WebPack

  • npm install draft-convert .

draft-convert ist Teil von peerDependencies von medium-draft .

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

Browser

  • Fügen Sie die folgenden Skripte vor Ihrem JS -Code hinzu. 
 < 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 >

Der Exporteur ist als MediumDraftExporter Global erhältlich.

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

Der medium-draft-exporter wird auch mit einem voreingestellten CSS ausgestattet, wenn Sie einige grundlegende Stile auf das gerenderte HTML anwenden möchten.

  • Verwenden Sie in WebPack im Rahmen Ihrer gerenderten HTML-Seite dies- 

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

  • In Browser können Sie auf Ihrer gerenderten HTML -Seite diesen Stylesheet -Link aufnehmen 

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

Laden Sie HTML, die mit medium-draft-exporter exportiert wurden, in editorState

Die Funktion zum Exportieren von HTML ist ab Version 0.5.3 erhältlich.

medium-draft verwendet Draft-Convert (was wiederum React-Dom-Server verwendet), um editorState von draft-js auf HTML zu bringen.

Der Importeur ist nicht Teil der Kernbibliothek. Wenn Sie medium-draft-importer verwenden möchten, befolgen Sie diese Schritte-

Browserify/WebPack

  • npm install draft-convert .

draft-convert ist Teil von peerDependencies von 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

Browser

  • Fügen Sie die folgenden Skripte vor Ihrem JS -Code hinzu. 
 < 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 >

Der Importeur ist als MediumDraftImporter Global erhältlich.

  • 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

Probleme

  • Schreiben Sie einen Exporteur, um die Entwurfsdaten speziell für HTML für medium-draft zu exportieren.
  • Finden Sie einen Weg heraus, den Platzhaltertext für leere Bildunterschriften anzuzeigen.
  • Derzeit muss die Symbolleiste angezeigt werden, die bei der Auswahl von Text in Bezug auf seine Position im Ansichtsfenster festgelegt werden muss.

Entwickler

  • Klonen Sie diesen Repo- git clone https://github.com/brijeshb42/medium-draft.git .
  • Installieren Sie Knotenpakete npm install react react-dom draft-convert && npm install .
  • Starten Sie die lokale Demo npm run dev . Dadurch wird ein lokaler Server auf Port 8080 gestartet.
  • Erstellen Sie mit npm run build .

LIZENZ

MIT

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle