re editor

Reeditor ·

Ein reagierender Texteditor außerhalb des Feldes

• Wie man benutzt
  • Out of the Box - Bieten Sie die Symbolleiste der AntD -Stil an
  • Benutzerdefiniert - stellt nur den Editor Core vor, passt die Symbolleiste an
• Häufig gestellte Fragen
• Unterstützte Funktionen

Merkmale

• Aus der Box ist keine Konfiguration erforderlich
• Wenn Sie angepasst sind, können Sie Symbolleisten in jedem Stil und einer beliebigen Form selbst entwickeln [API -Abschluss]
• Unterstützen Sie die Einstellungen für die Elementfunktion, wie z. B. Ändern der Bildgröße
• Unterstützen Sie die Markdown -Syntax
• Sehen Sie mehr

Wie man benutzt

Um sich an verschiedene Entwicklungsbedürfnisse anzupassen, stellt der Editor die folgenden zwei Nutzungsmethoden bereit.

Verwenden Sie aus der Box

Reeditor ist eine eingekapselte Komponente, die nach der Installation verwendet werden kann. Es enthält @Reeditor/Core und @Reeditor/Symbolleiste-Antd. Die Symbolleiste verwendet standardmäßig den AntD -Stil. Wenn Sie andere Symbolleisten verwenden möchten, lesen Sie bitte das folgende benutzerdefinierte Dokument

Installationsabhängigkeiten

$ npm install re-editor

Styles einführen

Eingeführt in JS

 import 're-editor/lib/styles/index.css'

Es kann auch in CSS eingeführt werden (erfordert CSS -Vorverarbeitungsunterstützung)

 @import 're-editor/lib/styles/index.css'

Requisiten

Eigentum	veranschaulichen	Typ
Wert	Wert des Herausgebers	Objekt
aufchange	Rückruf für Editor ändern Inhalte	(Wert: Wert) => void
Platzhalter	Platzhaltertext	Saite
Readonly	Schreibgeschützter Modus	boolean
OnImageUpload	Benutzerdefiniertes Bildbett	(Datei: Datei) => Versprechen <url: String>
Werkzeuge	Legen Sie den Anzeigeinhalt der Symbolleiste fest	Array <Array

Stellen Sie die Symbolleiste auf, um Inhalte anzuzeigen

tools props unterstützen das Array-Formular, wenn es sich um ein zweidimensionales Array handelt, wird es in Gruppen angezeigt

 tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
  [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
  [ 'orderedlist' , 'unorderedlist' ]
] }

Name	Funktion
deutlich	Deutlich
Kursiv	Kursiv
unterstreichen	Unterstreichen
Schlägen	Zeile löschen
OrderedList	Bestellte Liste
Nicht ordnungsgemäß	Ungeordnete Liste
Überschrift	Titel
ausrichten	Ausrichtung
Bild	Bild
Tisch	Blatt
Code	Code
rückgängig machen	Widerrufen
Wiederholen	Überarbeiten
Vollbild	Vollbild

Anpassen

Der Editor ist in zwei Teile aufgeteilt, den Inhaltsbearbeitungsbereich und die Symbolleiste. Im Folgenden wird beschrieben, wie Sie die Symbolleiste anpassen können

Installieren Sie den Editor Core

$ npm install @re-editor/core

Erstellen Sie eine Symbolleiste

Sie können eine Editor -Symbolleiste in irgendeiner Weise erstellen. Sie müssen die Editor -Instanz an die Symbolleiste übergeben. Sie können sich auf die Implementierung von Reeditor und @Reeditor/Symbolleiste-Antd beziehen, um die API-Dokumentation für Einzelheiten anzuzeigen (dieser Teil des Dokuments wurde noch nicht geschrieben. Wird sie in naher Zukunft abgeschlossen?)

Implementieren Sie beispielsweise eine mutige Funktion:

 import { command } from '@re-editor/core' ;

const Demo = ( props ) => {
  function handleClick ( ) {
    command ( props . editor ) ( 'bold' )
  }
  return < div onClick = { handleClick } > bold </ div >
}

Einführung in Pakete

• Reeditor: Ein eingekapselter Editor mit Symbolleiste
• @Reeditor/Core: Editor Core
• @Reeditor/Symbolleiste-Antd: Symbolleiste basierend auf AntD, Standardeinstellung
• @Reeditor/Beispiele: Demo-Projekt

FAQ

Was ist der Unterschied zwischen dem Vergleich mit Slate oder Draft-Js?

Slate oder Draft ist kein reiner Editor, sondern eher wie ein Framework für den Bau von Redakteuren. Der Reeditor wird auf der Grundlage von Slate entwickelt, sodass Sie nicht auf den Prozess des构建编辑器achten müssen.

So ändern Sie den Stil

Der Stil ist in zwei Teile unterteilt, Knoten (fett, H1, H2 usw.) und die Symbolleiste. Sie alle können den grundlegenden Stil über CSS umschreiben, und die Symbolleiste kann den Stil auch durch CSS vollständig umschreiben.

Was soll ich tun, wenn die Menge der gespeicherten Daten jedes Mal zu groß ist?

Mithilfe der inkrementellen Aktualisierung befindet sich der Wert des Onchange -Rückrufs im unveränderlichen Format. Sie können unveränderliche JS-DIFF und andere Methoden verwenden, um den Inhalt von Diff für inkrementelles Update zu erhalten

So geben Sie einen Upload -Image -Server an

Das Bild wird standardmäßig als Base64 gespeichert. Wenn Sie das Bild auf den angegebenen Server hochladen müssen, können Sie die Funktion " onImageUpload (Datei: Datei) => Versprechen <url: String> Beispielcode verwenden

Funktion

Textdekoration

粗体斜体下划线删除线下标

Liste

有序列表无序列表

Ausrichtung

左对齐右对齐居中对齐两端对齐

Titel

h1 h2 h3 h4 h5 h6

andere

• 图片
  • Setzen Sie die Größe
  • Kopieren Sie aus der Zwischenablage
  • Unterstützt das benutzerdefinierte Hochladen von Pictures Server -Adressen
• 表格
  • Zeilen hinzufügen
  • Spalten hinzufügen
  • Zeilen löschen
  • Spalten löschen
• 代码高亮
  • JS
  • CSS
  • html
• markdown
  • H1-H6: #
  • Zitat: >
  • Bestellte Liste: -
  • Nicht ordnungsgemäße Liste: 1.
• Vollbildungsbearbeitung

Andere Funktionen nehmen weiter zu ...