react native zss rich text editor

React editor de texto rico nativo

Um editor de texto rico totalmente funcional para Android e iOS, com base no projeto ZSSRICHTEXTEDITOR.

Instalação

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

No Android, adicione o seguinte ao final do seu 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 ' ))
}

Além disso, siga as instruções aqui para adicionar a dependência nativa react-native-webview-bridge-updated .

Uso

react-native-zss-rich-text-editor exporta dois componentes e um dicionário const:

RichTextEditor

O componente do editor. Basta colocar esse componente em sua hierarquia de visualização para receber um editor de texto rico totalmente funcional.

RichTextEditor recebe os seguintes adereços opcionais:

• initialTitleHTML

  HTML que será renderizado na seção de título assim que o componente carregar.

• initialContentHTML

  HTML que será renderizado na seção de conteúdo na carga.

• titlePlaceholder

  Texto que será usado como espaço reservado quando nenhum texto estiver presente na seção de título.

• contentPlaceholder

  Texto que será usado como espaço reservado quando nenhum texto estiver presente na seção de conteúdo.

• customCSS

  Quaisquer estilos CSS personalizados que você deseja injetar no editor.

• editorInitializedCallback

  Uma função que será chamada quando o editor tiver sido inicializado.

RichTextEditor também possui métodos que podem ser usados em seu ref para definir o estilo na seleção atual ou na posição do 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 mostra uma caixa de diálogo para definir um título de link e URL, que será inserido no local atual do cursor.

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

Para ajustar o conteúdo, espaço reservado ou CSS, use esses métodos

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

Esses métodos são usados ao adicionar conteúdo como imagens ou links que intefrentarão com a posição do cursor. prepareInsert salva a seleção atual e restoreSelection a substituirá após a realização da inserção. É chamado implicitamente pela insertImage e insertLink para que eles provavelmente nunca sejam chamados diretamente.

• prepareInsert()
• restoreSelection()

Para obter o conteúdo ou o título HTML, use esses métodos assíncronos .

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

Para focar ou desbaste seções, use esses métodos

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

Para saber quando o título ou o conteúdo está em foco, use os seguintes métodos.

• setTitleFocusHandler(callbackHandler)
• setContentFocusHandler(callbackHandler)

Esse método registra uma função que será chamada quando a posição do cursor muda ou uma alteração é feita no estilo do editor na posição do cursor., O retorno de chamada será chamado com uma variedade de actions que estão ativas na posição do cusor, permitindo que uma barra de ferramentas responda a alterações.

• registerToolbar(listener)

Exemplo 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 é um componente que fornece uma barra de ferramentas para controlar facilmente um editor. Ele foi projetado para ser usado junto com um componente RichTextEditor .

O RichTextToolbar possui uma propriedade necessária:

• getEditor()

Que deve fornecer uma função que retorne um ref a um componente RichTextEditor .

Isso ocorre porque o ref não é criado até depois da primeira renderização, antes da qual a barra de ferramentas é renderizada. Isso significa que qualquer ref aprovado diretamente será inevitavelmente aprovado como undefined .

Outros adereços suportados pelo componente RichTextToolbar são:

• actions

  Uma array de actions a serem fornecidas por esta barra de ferramentas. As ações padrão são:

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

• onPressAddLink

• onPressAddImage

  As funções chamadas quando as ações addLink ou addImage são tocadas.

• selectedButtonStyle

• iconTint

• selectedIconTint

• unselectedButtonStyle

  Eles fornecem opções para os botões de ação de estilo.

• renderAction

  Em tudo, você pode fornecer uma função de renderização que será usada em vez do padrão, para que você possa controlar totalmente o design da barra de pedágio.

• iconMap

  RichTextToolbar vem com ícones padrão para as ações padrão que ele renderiza. Para substituí-los ou adicionar ícones para ações que não sejam de defesa, forneça-as em um dicionário a este suporte.

Exemplo de uso:

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

actions

Este é um conjunto de constituições de todas as ações suportadas. Estes serão passados em matrizes para todos os retornos de chamada registrados no editor usando o 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',
}

Atribuição

react-native-zss-rich-text-editor é um invólucro em torno do incrível projeto Zssrichtexteditor. Ele também se comunica com o editor usando (um pequeno garfo) do incrível projeto React-native-Webview-Bridge.