react native zss rich text editor

React Native Native Rich Text Editor

Un editor de texto rico completamente funcional tanto para Android como para iOS, basado en el proyecto ZSSRichTextEditor.

Instalación

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

En Android, agregue lo siguiente al final de su 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 ' ))
}

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

Uso

react-native-zss-rich-text-editor exporta dos componentes y un diccionario constante:

RichTextEditor

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

RichTextEditor toma los siguientes accesorios opcionales:

• initialTitleHTML

  Html que se representará en la sección de título tan pronto como se cargue el componente.

• initialContentHTML

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

• titlePlaceholder

  Texto que se utilizará como marcador de posición cuando no hay texto presente en la sección de título.

• contentPlaceholder

  Texto que se utilizará como marcador de posición cuando no hay texto presente en la sección de contenido.

• customCSS

  Cualquier estilos CSS personalizados que desee inyectar al editor.

• editorInitializedCallback

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

RichTextEditor también tiene métodos que se pueden usar en su ref para establecer el estilo en la selección actual o la posición del cursor:

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

Este método muestra un diálogo para configurar un título de enlace y URL, que se insertará en la ubicación actual del cursor.

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

Para ajustar contenido, marcadores de posición o CSS, use estos métodos

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

Estos métodos se utilizan al agregar contenido como imágenes o enlaces que serán interferentes con la posición del cursor. prepareInsert guarda la selección actual, y restoreSelection la reemplazará después de que se realice la inserción. Se llama implícitamente por insertImage e insertLink por lo que probablemente nunca se les llame directamente.

• prepareInsert()
• restoreSelection()

Para obtener el contenido o el título HTML, use estos métodos asincrónicos .

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

Para concentrarse o difuminar las secciones, use estos métodos

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

Para saber cuándo el título o el contenido están enfocados, use los siguientes métodos.

• setTitleFocusHandler(callbackHandler)
• setContentFocusHandler(callbackHandler)

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)

Ejemplo de uso:

 < 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

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

RichTextToolbar tiene una propiedad requerida:

• getEditor()

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

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 RichTextToolbar 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

• onPressAddLink

• onPressAddImage

  Funciones llamadas cuando se aprovechan las acciones de addLink o addImage .

• selectedButtonStyle

• iconTint

• selectedIconTint

• unselectedButtonStyle

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

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

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

actions

Este es un conjunto de constantes de todas las acciones compatibles. Estos se pasarán en matrices a todas las devoluciones de llamada registradas con el editor utilizando el método 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',
}

Atribución

react-native-zss-rich-text-editor es un envoltorio alrededor del increíble proyecto ZSSrichTextEditor. También se comunica con el editor usando (un pequeño tenedor) del impresionante proyecto React-Native-Webview-Bridge.