react native rich editor

React Native Rich Text Editor

---

Un éditeur de texte riche entièrement fonctionnel pour Android et iOS (macOS et Windows)?

Si vous souhaitez utiliser Flutter , vous pouvez vérifier ici pour ajouter Flutter_rich_Editor

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

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

• Aperçu en ligne （certaines fonctions）
• Exemple de crochets réécriture

---

Problème de défilement

### usecontainer = {true} doit être placé dans ScrolView et ajouter une méthode de rappel oncursorPosition pour gérer le positionnement de la barre de défilement, reportez-vous à des exemples this.scrollRef.current.scrollTo({y: scrollY - 30, animated: true});

---

RichEditor

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

RichEditor prend les accessoires facultatifs suivants:

• html

  Accepte HTML personnalisé, vous permettant de faire vos propres personnalisations

• placeholder

  Envelopper l'espace réservé de contenu de l'éditeur

• initialContentHTML

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

• initialFocus

• Valeur booléenne à la mise au point de la demande de contenu initiale. La valeur par défaut est false .

• disabled

• Valeur booléenne pour désactiver l'éditeur. La valeur par défaut est false .

• enterKeyHint

• Valeur de chaîne pour définir le type de clé de retour - returnKeyType

• editorInitializedCallback

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

• editorStyle

  Style pour un conteneur ou pour l'éditeur riche plus paramètres sombres ou légers. Objet contenant les options suivantes:

  • backgroundColor : Couleur d'arrière-plan de l'éditeur
  • color : éditeur Texte Couleur
  • Couleur caretColor / sélection de carilor
  • placeholderColor : éditeur Couleur de texte de placement
  • contentCSSText : Texte CSS de contenu de l'éditeur （Initial Valid）
  • cssText : Texte CSS global de l'éditeur （Initial Valid）
  • initialCSSText : Injecte CSS au début de la feuille de style en ligne. Utile pour incorporer des polices personnalisées (voir ci-dessous).

• Rappel onChange après modification des données de l'éditeur

• rappel onHeightChange après le changement de taille

• rappel onMessage en dehors du traitement interne du post-messagerie

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

• command exécuter JS dans l'éditeur

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

• commandDOM manipule le DOM dans l'éditeur

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

• useContainer une valeur booléenne qui détermine si un conteneur de vue est enroulé autour du WebView. La valeur par défaut est vraie. Si vous utilisez votre propre vue pour enrouler cette bibliothèque, définissez cette valeur sur False.

• styleWithCSS Lorsque vrai, l'attribut de style des balises est modifié. Sinon, des balises dédiées sont créées. La valeur par défaut est fausse

• initialHeight UseContainer est faux par vue en ligne de la hauteur initiale

• pasteAsPlainText une valeur booléenne (faux par défaut) qui détermine si la pâte de presse-papiers gardera son format ou si elle sera fait en texte brut

• useCharacter L'option de désactiver les caractères chinois vous permet de prendre en charge les caractères anglais sans erreurs sur Android. Définir sur true par défaut pour la compatibilité vers l'arrière.

• defaultHttps Une valeur booléenne (vrai en défaut) qui a apparenté https: // au début des liens

• Valeur de pâte de presse-papiers sur le presse- onPaste

• Événement Keyup onKeyUp (bogue Android 229)

• Événement Keydown onKeyDown de rappel (bogue Android 229)

• Valeur d'entrée de rappel onInput

• lien de rappel onLink Cliquez

• Focus de l'éditeur de rappel onFocus

• Éditeur de rappel onBlur Blur

• rappel onCursorPosition entrez la position du curseur this.scrollRef.current.scrollTo({y: scrollY - 30, duration: 100, animated: true});

RichEditor possède également des méthodes qui peuvent être utilisées sur son ref à définir:

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

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: Function)

Exemple d'utilisation:

 < 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 ( ) }
/>

En utilisant des polices personnalisées

Afin d'utiliser des polices personnalisées, vous devez utiliser initialCSSText à partir de l'hélice editorStyle .

1. Téléchargez vos fichiers de police sur https://transfonter.org et vérifiez l'option «Base64». Lorsque vous téléchargez le fichier zip, il y aura un fichier Stylesheet.css là-bas.
2. Prenez votre fichier Stylesheet.css et créez un fichier stylesheet.js .
3. Créez une exportation et collez le contenu du fichier CSS là-bas. Par exemple:

 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 ;

4. Où vous avez incorporé votre composant RichEditor , importez le fichier et utilisez-le.

 import FontFamilyStylesheet from 'stylesheet.js' ;

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

5. Recharger l'application. Vous devriez maintenant voir votre riche contenu d'éditeur dans votre visage de police personnalisé!

Pour plus d'informations sur le fonctionnement initialCSSText , consultez le PR ici. En outre, le crédit à ce commentaire de numéro et sa fourche qui décrit comment utiliser le fichier de police codé Base64.

RichToolbar

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 RichEditor .

Le RichToolbar a une propriété requise:

• getEditor()

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

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 soutenus par la composante RichToolbar 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
  • actions.keyboard
  • actions.setStrikethrough
  • actions.setUnderline
  • actions.removeFormat
  • actions.insertVideo
  • actions.checkboxList
  • actions.undo
  • actions.redo

• Fonctions onPressAddImage appelées lorsque les actions addImage sont taraulées.

• Logique onInsertLink pour ce qui se passe lorsque vous appuyez sur le bouton Ajouter un lien d'insertion

• disabled

• Valeur booléenne pour désactiver l'éditeur. La valeur par défaut est false .

• iconTint

• unselectedButtonStyle

• selectedIconTint

• selectedButtonStyle

• disabledIconTint

• disabledButtonStyle

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

• iconSize

  Définit la taille de l'icône en pixels. La valeur par défaut est 50.

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

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

Avec action personnalisée:

Pour définir votre propre action personnalisée:

• Envoyez votre nom d'action en tant que chaîne dans le tableau actions .
• Incluez une icône pour cela avec l' iconMap
• Ajoutez un accessoire de fonction avec le même nom d'action à appeler sur le robinet

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

Un exemple complet utilisant un composant fonctionnel

 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 ;

---

Merci beaucoup pour le soutien de JetBrains