react native rich editor Download - react native rich editor Quellcode Download

react native rich editor

Andere Ressourcen

v1.9.0

Herunterladen

Reagieren Sie den einheimischen reichen Texteditor

Ein voll funktionsreicher reichen Texteditor für Android und iOS (macOS und Windows)?

Wenn Sie Flutter verwenden möchten, können Sie hier überprüfen, ob Sie flutter_rich_editor hinzufügen können

 yarn add react-native-pell-rich-editor
or
npm i react-native-pell-rich-editor

Befolgen Sie hier auch Anweisungen, um die native Abhängigkeit react-native-webview hinzuzufügen.

Online -Vorschau （Einige Funktionen）
Beispiel -Hooks Umschreiben

Bildlaufproblem

### usecontainer = {true} muss in Scrolview platziert und eine oncursorPosition hinzufügen, um die Positionierung von Scroll -Balken zu verarbeiten. Siehe Beispiele this.scrollRef.current.scrollTo({y: scrollY - 30, animated: true});

`RichEditor`

Die Editor -Komponente. Stellen Sie diese Komponente einfach in Ihrer Ansichtshierarchie ein, um einen voll funktionsfähigen reichen Texteditor zu erhalten.

RichEditor nimmt die folgenden optionalen Requisiten an:

html
Akzeptiert benutzerdefinierte HTML, sodass Sie Ihre eigenen Anpassungen vornehmen können
placeholder
Wickeln Sie den Platzhalter des Editor Contents ein
initialContentHTML
HTML, das im Inhaltsabschnitt über Last gerendert wird.
initialFocus
Boolescher Wert für den Fokus der ersten Inhaltsanforderung. Der Standardwert ist false .
disabled
Boolescher Wert, um den Redakteur zu deaktivieren. Der Standardwert ist false .
enterKeyHint
String -Wert zum festgelegten Rückgabeschlüsseltyp - returnKeyType
editorInitializedCallback
Eine Funktion, die aufgerufen wird, wenn der Editor initialisiert wurde.
editorStyle
Styling für Container oder für einen reichen Editor mehr dunkle oder helle Einstellungen. Objekt mit folgenden Optionen:
- backgroundColor : Editor Hintergrundfarbe
- color : Editor Textfarbe
- caretColor Cursor/Auswahlfarbe
- placeholderColor : Redakteur Platzhaltertexte Farbe
- contentCSSText : Editor Content CSS -Text （Anfang gültig）
- cssText : Editor Global CSS -Text （Anfang gültig）
- initialCSSText : Injiziert CSS zu Beginn des Inline -Stylesheet. Nützlich für die Einbeziehung von benutzerdefinierten Schriftarten (siehe unten).
onChange -Rückruf nach Editordatenänderung
onHeightChange -Rückruf nach der Höhe der Höhe

onMessage -Rückruf außerhalb der internen Verarbeitung der Postmessage

 < img src ="" onclick =" _.sendEvent('ImgClick') " contenteditable =" false " />

command JS im Editor

 // $ = document
 this . richText . current ?. commandDOM ( '$.execCommand(' insertHTML ', false, "<br/>")' ) ;

commandDOM manipulieren die DOM im Herausgeber

 // $ = document.querySelector
 this . richText . current ?. commandDOM ( `$('#title').style.color=' ${ color } '` ) ;

useContainer Ein Boolean -Wert, der feststellt, ob ein Ansichtsbehälter um das Webview gewickelt ist. Der Standardwert ist wahr. Wenn Sie Ihre eigene Ansicht verwenden, um diese Bibliothek umzuwickeln, setzen Sie diesen Wert auf false.
styleWithCSS Wenn wahr, werden Stilattribut von Tags geändert. Ansonsten werden dedizierte Tags erstellt. Der Standardwert ist falsch
initialHeight UseContainer ist durch Inline -Ansicht der anfänglichen Höhe falsch
pasteAsPlainText Ein boolescher Wert (falsch wie Standard), der feststellt
useCharacter Die Option, chinesische Zeichen zu deaktivieren, ermöglicht es Ihnen, englische Zeichen ohne Fehler auf Android zu unterstützen. Standardmäßig auf true eingestellt, um die Kompatibilität rückwärts.
defaultHttps Ein boolescher Wert (true als Standard), der https: // zum Beginn der Links vorbereitet
onPaste Callback -Zwischenablagepaste Wert
onKeyUp Callback Keyup -Ereignis (Android 229 -Fehler)
onKeyDown Callback Keydown -Ereignis (Android 229 -Fehler)
onInput Eingabewert für den Eingang
onLink -Rückruf -Link Klicken Sie auf
onFocus Callback Editor Focus
onBlur Callback -Editor Blur
onCursorPosition -Rückruf Eingeben Sie die Position des Cursors this.scrollRef.current.scrollTo({y: scrollY - 30, duration: 100, animated: true});

RichEditor verfügt auch über Methoden, die auf seinem ref zum Setzen verwendet werden können:

setContentHTML(html: string)
insertImage(url: string, style?: string)
insertLink(title: string, url: string)
insertText(text: string)
insertHTML(html: string)
insertVideo(url: string, style?: string)
setContentFocusHandler(handler: Function)
blurContentEditor()
focusContentEditor()

Diese Methode registriert eine Funktion, die aufgerufen wird, wenn sich die Position des Cursors ändert oder eine Änderung am Styling des Editors an der Position des Cursors vorgenommen wird. Der Rückruf wird mit einer Reihe von actions aufgerufen, die an der cusor -Position aktiv sind, sodass eine Symbolleiste auf Änderungen reagieren kann.

registerToolbar(listener: Function)

Beispiel Verwendung:

 < RichEditor
  ref = { ( r ) => this . richtext = r }
  initialContentHTML = { 'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>' }
  editorInitializedCallback = { ( ) => this . onEditorInitialized ( ) }
/>

Mit benutzerdefinierten Schriftarten

Um benutzerdefinierte Schriftarten zu verwenden, müssen Sie initialCSSText aus der editorStyle -Requisite verwenden.

Laden Sie Ihre Schriftdateien auf https://transfonter.org hoch und überprüfen Sie die Option "Base64". Wenn Sie die ZIP -Datei herunterladen, gibt es dort eine Stylesheet.css -Datei.
Nehmen Sie Ihre Stylesheet.css -Datei und erstellen Sie eine stylesheet.js -Datei.
Erstellen Sie einen Exportieren und fügen Sie den Inhalt der CSS -Datei dort ein. z.B:

 const FontFamilyStylesheet = `
@font-face {
    font-family: 'Your Font Family';
    src: url('data:font/ttf;charset=utf-8;base64,...............'); // You can also use a web url here
    font-weight: normal;
}
` ;

export default FontFamilyStylesheet ;

Wo Sie Ihre RichEditor -Komponente integriert haben, importieren Sie die Datei und verwenden Sie sie.

 import FontFamilyStylesheet from 'stylesheet.js' ;

const fontFamily = 'Your_Font_Family' ;
const initialCSSText = { initialCSSText : ` ${ FontFamilyStylesheet } ` , contentCSSText : `font-family: ${ fontFamily } ` }
< RichEditor editorStyle = { initialCSSText } / >

Laden Sie die App neu. Sie sollten jetzt Ihren reichen Editor -Inhalt in Ihrem benutzerdefinierten Schriftart sehen!

Weitere Informationen zur Funktionsweise von initialCSSText finden Sie in der PR. Darüber hinaus wird dieser Ausgabekommentar und seine Gabel beschrieben, die beschreibt, wie die Coded -Schriftart Base64 verwendet wird.

`RichToolbar`

Dies ist eine Komponente, die eine Symbolleiste für die einfache Steuerung eines Editors bietet. Es ist so konzipiert, dass es zusammen mit einer RichEditor -Komponente verwendet werden kann.

Die RichToolbar hat eine erforderliche Immobilie:

getEditor()

Dies muss eine Funktion liefern, die einen ref an eine RichEditor zurückgibt.

Dies liegt daran, dass der ref erst nach dem ersten Render erstellt wird, vor der die Symbolleiste gerendert wird. Dies bedeutet, dass jeder direkt verabschiedete ref unweigerlich als undefined verabschiedet wird.

Andere Requisiten, die von der RichToolbar -Komponente unterstützt werden, sind:

actions
Eine array von actions , die von dieser Symbolleiste bereitgestellt werden sollen. Die Standardaktionen sind:
- actions.insertImage
- actions.setBold
- actions.setItalic
- actions.insertBulletsList
- actions.insertOrderedList
- actions.insertLink
- actions.keyboard
- actions.setStrikethrough
- actions.setUnderline
- actions.removeFormat
- actions.insertVideo
- actions.checkboxList
- actions.undo
- actions.redo
onPressAddImage -Funktionen, die aufgerufen werden, wenn die addImage -Aktionen abgebildet werden.
onInsertLink -Logik für das, was passiert, wenn Sie auf die Taste Hinzufügen von Hinzufügen hinzufügen
disabled
Boolescher Wert, um den Redakteur zu deaktivieren. Der Standardwert ist false .
iconTint
unselectedButtonStyle
selectedIconTint
selectedButtonStyle
disabledIconTint
disabledButtonStyle
Diese bieten Optionen zum Styling -Action -Tasten.
iconSize
Definiert die Größe des Symbols in Pixeln. Standard ist 50.
renderAction
Altenativ können Sie eine Renderfunktion anstelle der Standardeinstellung bereitstellen, sodass Sie das Maut -Design vollständig steuern können.
iconMap
RichTextToolbar wird mit Standardsymbolen für die von ihm erzeugten Standardaktionen ausgestattet. Um diese außer Kraft zu setzen oder Symbole für Nicht-Default-Aktionen hinzuzufügen, geben Sie sie in einem Wörterbuch für diese Requisition an.

Beispiel Verwendung:

 const richText = React . createRef ( ) || useRef ( ) ;
< RichToolbar editor = { that . richText } />

Mit benutzerdefinierter Aktion:

Um Ihre eigene benutzerdefinierte Aktion zu definieren:

Senden Sie Ihren Aktionsnamen als Zeichenfolge im actions .
Fügen Sie ein Symbol damit mit der iconMap hinzu
Fügen Sie eine Funktionsrequisite mit dem gleichen Aktionsnamen hinzu

 < RichToolbar
    editor = { that . richText }
	actions = { [
		actions . setBold ,
		actions . setItalic ,
		actions . insertBulletsList ,
		actions . insertOrderedList ,
		actions . insertImage ,
		'customAction' ,
	] }
	iconMap = { {
		customAction : customIcon ,
	} }
	customAction = { this . handleCustomAction }
/>

Ein vollständiges Beispiel mit einer funktionalen Komponente

 import React from "react" ;
import { Text , Platform , KeyboardAvoidingView , SafeAreaView , ScrollView } from "react-native" ;
import { actions , RichEditor , RichToolbar } from "react-native-pell-rich-editor" ;


const handleHead = ( { tintColor } ) => < Text style = { { color : tintColor } } > H1 </ Text >
const TempScreen = ( ) => {
	const richText = React . useRef ( ) ;
	return (
    < SafeAreaView >
      < ScrollView >
        < KeyboardAvoidingView behavior = { Platform . OS === "ios" ? "padding" : "height" }	style = { { flex : 1 } } >
          < Text > Description: </ Text >
          < RichEditor
              ref = { richText }
              onChange = { descriptionText => {
                  console . log ( "descriptionText:" , descriptionText ) ;
              } }
          />
        </ KeyboardAvoidingView >
      </ ScrollView >

      < RichToolbar
        editor = { richText }
        actions = { [ actions . setBold , actions . setItalic , actions . setUnderline , actions . heading1 ] }
        iconMap = { { [ actions . heading1 ] : handleHead } }
      />
    </ SafeAreaView >
  ) ;
} ;

export default TempScreen ;