react native zss rich text editor
1.0.0
Ein voll funktionsfähiger reicher Texteditor für Android und iOS, basierend auf dem ZSSReichtextextex -Projekt.
npm i --save react-native-zss-rich-text-editor
Fügen Sie auf Android Folgendes zum Ende Ihres android/app/build.gradle
project . afterEvaluate {
apply from : ' ../../node_modules/react-native-zss-rich-text-editor/htmlCopy.gradle ' ;
copyEditorHtmlToAppAssets(file( ' ../../node_modules/react-native-zss-rich-text-editor ' ))
} Befolgen Sie hier auch Anweisungen, um die native react-native-webview-bridge-updated Abhängigkeit hinzuzufügen.
react-native-zss-rich-text-editor exportiert zwei Komponenten und ein konstantes Wörterbuch:
RichTextEditorDie Editor -Komponente. Stellen Sie diese Komponente einfach in Ihrer Ansichtshierarchie ein, um einen voll funktionsfähigen reichen Texteditor zu erhalten.
RichTextEditor nimmt die folgenden optionalen Requisiten an:
initialTitleHTML
HTML, das im Titelabschnitt wiedergegeben wird, sobald die Komponente lädt.
initialContentHTML
HTML, das im Inhaltsabschnitt über Last gerendert wird.
titlePlaceholder
Text, der als Platzhalter verwendet wird, wenn im Titelabschnitt kein Text vorhanden ist.
contentPlaceholder
Text, der als Platzhalter verwendet wird, wenn im Inhaltsabschnitt kein Text vorhanden ist.
customCSS
Alle benutzerdefinierten CSS -Stile, die Sie dem Editor einfügen möchten.
editorInitializedCallback
Eine Funktion, die aufgerufen wird, wenn der Editor initialisiert wurde.
RichTextEditor hat auch Methoden, die für den ref verwendet werden können, um das Styling in der aktuellen Auswahl oder in der Cursorposition festzulegen:
setBold()setItalic()setUnderline()heading1()heading2()heading3()heading4()heading5()heading6()setParagraph()removeFormat()alignLeft()alignCenter()alignRight()alignFull()insertBulletsList()insertOrderedList()insertLink(url, title)updateLink(url, title)insertImage(attributes)setSubscript()setSuperscript()setStrikethrough()setHR()setIndent()setOutdent()setBackgroundColor(color)setTextColor(color)Diese Methode zeigt einen Dialog zum Einstellen eines Link -Titels und einer URL an, die am aktuellen Cursorort eingefügt wird.
showLinkDialog(optionalTitle = '', optionalUrl = '')Um Inhalte, Platzhalter oder CSS anzupassen, verwenden Sie diese Methoden
setTitlePlaceholder(placeholder)setContentPlaceholder(placeholder)setCustomCSS(css)setTitleHTML(html)setContentHTML(html) Diese Methoden werden verwendet, wenn Inhalte wie Bilder oder Links hinzugefügt werden, die mit der Cursorposition intiert werden. prepareInsert spart die aktuelle Auswahl und restoreSelection sie nach Abschluss der Einfügung. Es wird implizit von insertImage und insertLink aufgerufen, sodass sie wahrscheinlich niemals direkt aufgerufen werden sollten.
prepareInsert()restoreSelection()Verwenden Sie diese asynchronen Methoden, um den Inhalt oder den Titel HTML zu erhalten.
async getTitleHtml()async getTitleText()async getContentHtml()async getSelectedText()Um Abschnitte zu fokussieren oder zu verwischen, verwenden Sie diese Methoden
focusTitle()focusContent()blurTitleEditor()blurContentEditor()Um zu wissen, wann der Titel oder der Inhalt im Fokus stehen, verwenden Sie die folgenden Methoden.
setTitleFocusHandler(callbackHandler)setContentFocusHandler(callbackHandler) 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) < RichTextEditor
ref = { ( r ) => this . richtext = r }
initialTitleHTML = { 'Title!!' }
initialContentHTML = { 'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>' }
editorInitializedCallback = { ( ) => this . onEditorInitialized ( ) }
/> 
RichTextToolbar Dies ist eine Komponente, die eine Symbolleiste für die einfache Steuerung eines Editors bietet. Es ist so konzipiert, dass es zusammen mit einer RichTextEditor -Komponente verwendet werden kann.
Die RichTextToolbar hat eine erforderliche Eigenschaft:
getEditor() Dies muss eine Funktion liefern, die einen ref an eine RichTextEditor -Komponente 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.
Weitere Requisiten, die von der RichTextToolbar -Komponente unterstützt werden, sind:
actions
Eine array von actions , die von dieser Symbolleiste bereitgestellt werden sollen. Die Standardaktionen sind:
actions.insertImageactions.setBoldactions.setItalicactions.insertBulletsListactions.insertOrderedListactions.insertLink onPressAddLink
onPressAddImage
Funktionen, die aufgerufen werden, wenn die addLink oder addImage -Aktionen abgebildet werden.
selectedButtonStyle
iconTint
selectedIconTint
unselectedButtonStyle
Diese bieten Optionen zum Styling -Action -Tasten.
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.
< RichTextToolbar
getEditor = { ( ) => this . richtext }
/> 
actions Dies ist eine Reihe von Consts aller unterstützten Aktionen. Diese werden in Arrays an alle beim Editor registrierten Rückrufe über die registerToolbar() -Methode übergeben.
{
setTitleHtml: 'SET_TITLE_HTML',
setContentHtml: 'SET_CONTENT_HTML',
getTitleHtml: 'GET_TITLE_HTML',
getTitleText: 'GET_TITLE_TEXT',
getContentHtml: 'GET_CONTENT_HTML',
getSelectedText: 'GET_SELECTED_TEXT',
blurTitleEditor: 'BLUR_TITLE_EDITOR',
blurContentEditor: 'BLUR_CONTENT_EDITOR',
focusTitle: 'FOCUS_TITLE',
focusContent: 'FOCUS_CONTENT',
setBold: 'bold',
setItalic: 'italic',
setUnderline: 'underline',
heading1: 'h1',
heading2: 'h2',
heading3: 'h3',
heading4: 'h4',
heading5: 'h5',
heading6: 'h6',
setParagraph: 'SET_PARAGRAPH',
removeFormat: 'REMOVE_FORMAT',
alignLeft: 'justifyLeft',
alignCenter: 'justifyCenter',
alignRight: 'justifyRight',
alignFull: 'justifyFull',
insertBulletsList: 'unorderedList',
insertOrderedList: 'orderedList',
insertLink: 'INST_LINK',
updateLink: 'UPDATE_LINK',
insertImage: 'INST_IMAGE',
setSubscript: 'subscript',
setSuperscript: 'superscript',
setStrikethrough: 'strikeThrough',
setHR: 'horizontalRule',
setIndent: 'indent',
setOutdent: 'outdent',
setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
setContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',
setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
prepareInsert: 'PREPARE_INSERT',
restoreSelection: 'RESTORE_SELECTION',
setCustomCSS: 'SET_CUSTOM_CSS',
setTextColor: 'SET_TEXT_COLOR',
setBackgroundColor: 'SET_BACKGROUND_COLOR',
}
react-native-zss-rich-text-editor ist ein Wrapper um das erstaunliche ZSSReichtextextextex-Projekt. Es kommuniziert auch mit dem Herausgeber (eine winzige Gabel) des Awesome React-Native-WebView-Bridge-Projekts.
