React Nativer Rich-Text-Editor

React Nativer Rich-Text-Editor

Ein voll funktionsfähiger Rich Text Editor für Android und iOS (macOS und Windows)?

Wenn Sie verwenden möchten flattern , Du kannst nachschauen Hier hinzufügen flatter_rich_editor

Befolgen Sie außerdem die Anweisungen Hier um das native |_+_| . hinzuzufügen Abhängigkeit.

• Online-Vorschau （Einige Funktionen）
• Beispiel

react-native-webview

Die Editor-Komponente. Platzieren Sie diese Komponente einfach in Ihrer Ansichtshierarchie, um einen voll funktionsfähigen Rich-Text-Editor zu erhalten.

|_+_| nimmt die folgenden optionalen Requisiten:

• RichEditor

  Platzhalter für Editor-Inhalt umschließen

• RichEditor

  HTML, das beim Laden im Inhaltsbereich gerendert wird.

• placeholder

• Boolescher Wert für den anfänglichen Inhaltsanforderungsfokus. Der Standardwert ist |_+_|.

• initialContentHTML

• Boolescher Wert zum Deaktivieren des Editors. Der Standardwert ist |_+_|.

  Melden Sie sich bei aol.com an

• initialFocus

  Eine Funktion, die aufgerufen wird, wenn der Editor initialisiert wurde.

• false

  Styling für Container oder für Rich Editor mehr dunkle oder helle Einstellungen. Objekt mit den folgenden Optionen:

  • |_+_|: Hintergrundfarbe des Editors
  • |_+_|: Textfarbe des Editors
  • |_+_|: Textfarbe des Editor-Platzhalters
  • |_+_|: Inhalt des Editors CSS-Text（Anfangsgültigkeit）
  • |_+_|: Editor für globalen CSS-Text (Anfangsgültigkeit)

• |_+_| Rückruf nach Änderung der Editordaten

• |_+_| Rückruf nach Höhenänderung

• disabled

  Ein boolescher Wert, der bestimmt, ob ein View-Container um die WebView gewickelt wird. Der Standardwert ist wahr. Wenn Sie Ihre eigene Ansicht verwenden, um diese Bibliothek zu umschließen, setzen Sie diesen Wert auf false.

• false

  Ein boolescher Wert (standardmäßig falsch), der bestimmt, ob das Einfügen in die Zwischenablage das Format behält oder als einfacher Text erfolgt

• |_+_| Rückruf-Zwischenablage-Einfügewert

• |_+_| Callback Keyup-Ereignis

• |_+_| Rückruf-Keydown-Ereignis

|_+_| hat auch Methoden, die auf seinem |_+_| . verwendet werden können einstellen:

Ubuntu gegen Himbeer-Pi-OS

• editorInitializedCallback
• editorStyle
• backgroundColor
• color
• placeholderColor
• contentCSSText
• cssText
• onChange
• onHeightChange

Diese Methode registriert eine Funktion, die aufgerufen wird, wenn sich die Cursorposition ändert oder das Styling des Editors an der Cursorposition geändert wird., Der Callback wird mit einem Array von |_+_| . aufgerufen die an der Cursorposition aktiv sind, sodass eine Symbolleiste auf Änderungen reagieren kann.

• useContainer

Beispielverwendung:

onPaste

Dies ist eine Komponente, die eine Symbolleiste zur einfachen Steuerung eines Editors bereitstellt. Es wurde entwickelt, um zusammen mit einem |_+_| . verwendet zu werden Komponente.

Die |_+_| hat eine erforderliche Eigenschaft:

• onKeyUp

Welche muss a Funktion das gibt ein |_+_| . zurück zu einem |_+_| Komponente.

Dies liegt daran, dass die |_+_| wird erst nach dem ersten Rendern erstellt, vor dem die Symbolleiste gerendert wird. Dies bedeutet, dass alle |_+_| direkt übergeben wird unweigerlich als |_+_| übergeben.

Python initialisiert Liste mit Werten

Andere Requisiten, die vom |_+_| . unterstützt werden Bestandteil sind:

• onKeyDown

  Ein |_+_| von |_+_| von dieser Symbolleiste bereitgestellt werden. Die Standardaktionen sind:

  • RichEditor
  • ref
  • setContentHTML(html: string)
  • insertImage(url: string)
  • insertLink(title: string, url: string)
  • insertText(text: string)

• |_+_| Funktionen, die aufgerufen werden, wenn |_+_| Aktionen werden getippt.

• |_+_| Logik für das, was passiert, wenn Sie auf die Schaltfläche Link einfügen klicken

• insertHTML(html: string)

• Boolescher Wert zum Deaktivieren des Editors. Der Standardwert ist |_+_|.

• insertVideo(url: string)

• setContentFocusHandler(handler: Function)

• blurContentEditor()

• focusContentEditor()

• actions

• registerToolbar(listener: Function)

  Diese bieten Optionen zum Gestalten von Aktionsschaltflächen.

• this.richtext = r} initialContentHTML={'Hello World

  this is a new paragraph

  this is another new paragraph

  '} editorInitializedCallback={() => this.onEditorInitialized()} />

  Definiert die Größe des Symbols in Pixel. Standard ist 50.

• RichToolbar

  Alternativ können Sie eine Renderfunktion bereitstellen, die anstelle der Standardeinstellung verwendet wird, sodass Sie das Design der Mautleiste vollständig steuern können.

  wie man Helium-Krypto kauft

• RichEditor

  |_+_| kommt mit Standardsymbolen für die Standardaktionen, die es rendert. Um diese zu überschreiben oder Symbole für nicht standardmäßige Aktionen hinzuzufügen, stellen Sie sie dieser Requisite in einem Wörterbuch zur Verfügung.

Beispielverwendung:

Mit benutzerdefinierter Aktion:

So definieren Sie Ihre eigene benutzerdefinierte Aktion:

• Senden Sie Ihren Aktionsnamen als String im |_+_| Array.
• Fügen Sie ein Symbol dafür mit dem |_+_| . ein
• Fügen Sie eine Funktionsstütze mit demselben Aktionsnamen hinzu, die beim Tippen aufgerufen werden soll

Download-Details:

Autor: wxik

Quellcode: https://github.com/wxik/react-native-rich-editor

#reagieren #reagieren-native #mobile-apps