react native rich editor

React Native Native Rich Text Editor

---

¿Un editor de texto rico completamente funcional para Android e iOS (macOS y Windows)?

Si desea usar Flutter , puede verificar aquí para agregar Flutter_rich_Editor

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

Además, siga las instrucciones aquí para agregar la dependencia nativa react-native-webview .

• Vista previa en línea （algunas funciones）
• Ejemplo de los ganchos reescribir

---

Problema de desplazamiento

### usecontainer = {true} debe colocarse en scrolview y agregar un método de devolución de llamada oncursorPosition para manejar el posicionamiento de la barra de desplazamiento, consulte Ejemplos this.scrollRef.current.scrollTo({y: scrollY - 30, animated: true});

---

RichEditor

El componente del editor. Simplemente coloque este componente en su jerarquía de vista para recibir un editor de texto rico en pleno funcionario.

RichEditor toma los siguientes accesorios opcionales:

• html

  Acepta HTML personalizado, lo que le permite hacer sus propias personalizaciones

• placeholder

  Envuelva el marcador de posición de contenido del editor

• initialContentHTML

  Html que se representará en la sección de contenido sobre la carga.

• initialFocus

• Valor booleano al enfoque de solicitud de contenido inicial. El valor predeterminado es false .

• disabled

• Valor booleano para deshabilitar el editor. El valor predeterminado es false .

• enterKeyHint

• Valor de cadena para establecer el tipo de tecla de retorno - returnKeyType

• editorInitializedCallback

  Una función que se llamará cuando el editor se haya inicializado.

• editorStyle

  Estilo para contenedor o para editor rico más configuraciones oscuras o de luz. Objeto que contiene las siguientes opciones:

  • backgroundColor : editor Color de fondo
  • color : editor Color de texto
  • Cursor caretColor /Color de selección
  • placeholderColor : Editor Color de texto de marcador de posición
  • contentCSSText : Editor Content CSS Text （Inicial válido）
  • cssText : Texto CSS del editor Global （Inicial válido）
  • initialCSSText : inyecta CSS al comienzo de la hoja de estilo en línea. Útil para incorporar fuentes personalizadas (ver más abajo).

• onChange de llamada después de la modificación de datos del editor

• naqueta de llamada onHeightChange después del cambio de altura

• Vuelve de llamada onMessage fuera del procesamiento de tipo interno postmessage

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

• command ejecutar js en el editor

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

• commandDOM manipula el DOM en el editor

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

• useContainer Un valor booleano que determina si un contenedor de vista está envuelto en la WebView. El valor predeterminado es verdadero. Si está utilizando su propia vista para envolver esta biblioteca, configure este valor en falso.

• styleWithCSS cuando es verdadero, el atributo de estilo de las etiquetas se modifica. De lo contrario se crean etiquetas dedicadas. El valor predeterminado es falso

• initialHeight useContainer es falso por vista en línea de la altura inicial

• pasteAsPlainText Un valor booleano (falso como predeterminado) que determina si la pasta del portapapeles mantendrá su formato o se realizará como texto sin formato

• useCharacter La opción de deshabilitar los caracteres chinos le permite apoyar los caracteres ingleses sin errores en Android. Establezca en true por defecto para la compatibilidad hacia atrás.

• defaultHttps Un valor booleano (verdadero como predeterminado) que prepiene https: // al inicio de los enlaces

• Valor de pasta de portapapeles onPaste devolución de llamada

• Evento de tecla de devolución de llamada onKeyUp (error de Android 229)

• Evento Keydown de devolución de llamada onKeyDown (error de Android 229)

• Valor de entrada de devolución de llamada onInput

• Enlace de devolución de llamada onLink Haga clic

• onFocus Callback Editor Focus

• Editor de devolución de llamada onBlur desenfoque

• onCursorPosition Callback Ingrese la posición del cursor this.scrollRef.current.scrollTo({y: scrollY - 30, duration: 100, animated: true});

RichEditor también tiene métodos que se pueden usar en su ref para establecer:

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

Este método registra una función que se llamará cuando la posición del cursor cambie o se realiza un cambio en el estilo del editor en la posición del cursor. La devolución de llamada se llamará con una variedad de actions activas en la posición de Cusor, lo que permite que una barra de herramientas responda a los cambios.

• registerToolbar(listener: Function)

Ejemplo de uso:

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

Uso de fuentes personalizadas

Para usar fuentes personalizadas, debe usar initialCSSText desde el accesorio editorStyle .

1. Cargue sus archivos de fuentes a https://transfonter.org y verifique la opción 'Base64'. Cuando descargue el archivo zip, habrá un archivo Stylesheet.css allí.
2. Tome su archivo Stylesheet.css y cree un archivo stylesheet.js .
3. Cree una exportación y pegue el contenido del archivo CSS allí. p.ej:

 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. Donde ha incorporado su componente RichEditor , importe el archivo y utilícelo.

 import FontFamilyStylesheet from 'stylesheet.js' ;

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

5. Recargar la aplicación. ¡Ahora debería ver el contenido de su rico editor en su cara de fuente personalizada!

Para obtener más información sobre cómo funciona initialCSSText , consulte el PR aquí. Además, crédito a este tema de comentario y su bifurcación que describe cómo usar el archivo de fuente codificado Base64.

RichToolbar

Este es un componente que proporciona una barra de herramientas para controlar fácilmente un editor. Está diseñado para usarse junto con un componente RichEditor .

RichToolbar tiene una propiedad requerida:

• getEditor()

Que debe proporcionar una función que devuelva una ref a un componente RichEditor .

Esto se debe a que el ref no se crea hasta después del primer render, antes del cual se representa la barra de herramientas. Esto significa que cualquier ref aprobado directamente se aprobará inevitablemente como undefined .

Otros accesorios respaldados por el componente RichToolbar son:

• actions

  Una array de actions que se proporcionará por esta barra de herramientas. Las acciones predeterminadas son:

  • 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

• Las funciones onPressAddImage llamadas cuando se aprovechan las acciones addImage .

• onInsertLink Logic para lo que sucede cuando presiona el botón Agregar enlace insertar

• disabled

• Valor booleano para deshabilitar el editor. El valor predeterminado es false .

• iconTint

• unselectedButtonStyle

• selectedIconTint

• selectedButtonStyle

• disabledIconTint

• disabledButtonStyle

  Estos proporcionan opciones para el estilo de los botones de acción.

• iconSize

  Define el tamaño del icono en píxeles. El valor predeterminado es 50.

• renderAction

  Alentinativamente, puede proporcionar una función de renderizado que se usará en lugar del valor predeterminado, por lo que puede controlar completamente el diseño de Tollbar.

• iconMap

  RichTextToolbar viene con iconos predeterminados para las acciones predeterminadas que rinde. Para anularlos, o agregar íconos para acciones no defectuosas, proporcionarles en un diccionario a este accesorio.

Ejemplo de uso:

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

Con acción personalizada:

Para definir su propia acción personalizada:

• Envíe su nombre de acción como cadena en la matriz actions .
• Incluya un icono para él con el iconMap
• Agregue un accesorio de función con el mismo nombre de acción para llamar a Tap

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

Un ejemplo completo utilizando un componente funcional

 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 ;

---

Muchas gracias por el apoyo de JetBrains