react native zss rich text editor

React Native Rich Text Editor

Un éditeur de texte riche entièrement fonctionnel pour Android et iOS, basé sur le projet ZSSrichtexteditor.

Installation

 npm i --save react-native-zss-rich-text-editor

Sur Android, ajoutez ce qui suit à la fin de votre 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 ' ))
}

Suivez également les instructions ici pour ajouter la dépendance react-native-webview-bridge-updated .

Usage

react-native-zss-rich-text-editor exporte deux composantes et un dictionnaire de const:

RichTextEditor

Le composant de l'éditeur. Placez simplement ce composant dans votre hiérarchie pour recevoir un éditeur de texte riche entièrement fonctionnel.

RichTextEditor prend les accessoires facultatifs suivants:

• initialTitleHTML

  HTML qui sera rendu dans la section du titre dès que le composant se charge.

• initialContentHTML

  HTML qui sera rendu dans la section de contenu sur charge.

• titlePlaceholder

  Texte qui sera utilisé comme espace réservé lorsqu'aucun texte n'est présent dans la section du titre.

• contentPlaceholder

  Texte qui sera utilisé comme espace réservé lorsqu'aucun texte n'est présent dans la section Contenu.

• customCSS

  Tous les styles CSS personnalisés que vous souhaitez injecter à l'éditeur.

• editorInitializedCallback

  Une fonction qui sera appelée lorsque l'éditeur aura été initialisé.

RichTextEditor possède également des méthodes qui peuvent être utilisées sur son ref pour définir le style à la sélection actuelle ou à la position du curseur:

• 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)

Cette méthode montre une boîte de dialogue pour définir un titre de lien et une URL, qui sera insérée à l'emplacement actuel du curseur.

• showLinkDialog(optionalTitle = '', optionalUrl = '')

Pour ajuster le contenu, les espaces réservés ou le CSS, utilisez ces méthodes

• setTitlePlaceholder(placeholder)
• setContentPlaceholder(placeholder)
• setCustomCSS(css)
• setTitleHTML(html)
• setContentHTML(html)

Ces méthodes sont utilisées lors de l'ajout de contenu telles que des images ou des liens qui seront imprégnés avec la position du curseur. prepareInsert enregistre la sélection actuelle et restoreSelection le remplacera une fois l'insertion terminée. Il est appelé implicitement par insertImage et insertLink de sorte qu'ils ne devraient probablement jamais être appelés directement.

• prepareInsert()
• restoreSelection()

Pour obtenir le contenu ou le titre HTML, utilisez ces méthodes asynchrones .

• async getTitleHtml()
• async getTitleText()
• async getContentHtml()
• async getSelectedText()

Pour concentrer ou brouiller les sections, utilisez ces méthodes

• focusTitle()
• focusContent()
• blurTitleEditor()
• blurContentEditor()

Pour savoir quand le titre ou le contenu est mis au point, utilisez les méthodes suivantes.

• setTitleFocusHandler(callbackHandler)
• setContentFocusHandler(callbackHandler)

Cette méthode enregistre une fonction qui sera appelée lorsque la position du curseur change ou un changement est apporté au style de l'éditeur à la position du curseur., Le rappel sera appelé avec un tableau d' actions qui sont actives en position Cusor, permettant à une barre d'outils de répondre aux modifications.

• registerToolbar(listener)

Exemple d'utilisation:

 < 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

Il s'agit d'un composant qui fournit une barre d'outils pour contrôler facilement un éditeur. Il est conçu pour être utilisé avec un composant RichTextEditor .

Le RichTextToolbar a une propriété requise:

• getEditor()

Qui doit fournir une fonction qui renvoie un ref à un composant RichTextEditor .

En effet, la ref n'est créée qu'après le premier rendu, avant lequel la barre d'outils est rendue. Cela signifie que toute ref adoptée directement sera inévitablement adoptée comme undefined .

Les autres accessoires pris en charge par le composant RichTextToolbar sont:

• actions

  Un array d' actions à fournir par cette barre d'outils. Les actions par défaut sont:

  • actions.insertImage
  • actions.setBold
  • actions.setItalic
  • actions.insertBulletsList
  • actions.insertOrderedList
  • actions.insertLink

• onPressAddLink

• onPressAddImage

  Fonctions appelées lorsque les actions addLink ou addImage sont taraulées.

• selectedButtonStyle

• iconTint

• selectedIconTint

• unselectedButtonStyle

  Ceux-ci offrent des options pour les boutons d'action de style.

• renderAction

  Altenativement, vous pouvez fournir une fonction de rendu qui sera utilisée au lieu de la valeur par défaut, afin que vous puissiez contrôler pleinement la conception des péages.

• iconMap

  RichTextToolbar est livré avec des icônes par défaut pour les actions par défaut qu'il fait. Pour remplacer ceux-ci, ou pour ajouter des icônes pour les actions non défaut, fournissez-les dans un dictionnaire à cet accessoire.

Exemple d'utilisation:

 < RichTextToolbar
	getEditor = { ( ) => this . richtext }
/> 

actions

Il s'agit d'un ensemble de constants de toutes les actions prises en charge. Ceux-ci seront passés dans des tableaux à tous les rappels enregistrés auprès de l'éditeur à l'aide de la méthode registerToolbar() .

 {
	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',
}

Attribution

react-native-zss-rich-text-editor est un wrapper autour de l'incroyable projet ZSSrichtexteditor. Il communique également avec l'éditeur en utilisant (une minuscule fourche) du projet Awesome React-Native-WebView-Bridge.