react native rich editor

React editor de texto rico nativo

---

Um editor de texto rico totalmente funcional para Android e iOS (macOS e Windows)?

Se você quiser usar o Flutter , pode verificar aqui para adicionar Flutter_rich_editor

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

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

• Visualização online （Algumas funções)
• Exemplo de ganchos reescrever

---

Problema de rolagem

### usecontainer = {true} precisa ser colocado no scrolview e adicione um método de retorno de chamada oncursorPosition para lidar com o posicionamento da barra de rolagem, consulte os exemplos this.scrollRef.current.scrollTo({y: scrollY - 30, animated: true});

---

RichEditor

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

RichEditor recebe os seguintes adereços opcionais:

• html

  Aceite HTML personalizado, permitindo que você faça suas próprias personalizações

• placeholder

  Enrole o espaço reservado para conteúdo do editor

• initialContentHTML

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

• initialFocus

• Valor booleano para o foco inicial da solicitação de conteúdo. O valor padrão é false .

• disabled

• Valor booleano para desativar o editor. O valor padrão é false .

• enterKeyHint

• Valor da string para definir o tipo de chave de retorno - ReturnKeyType

• editorInitializedCallback

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

• editorStyle

  Estilo para contêiner ou editor rico mais configurações escuras ou claras. Objeto que contém as seguintes opções:

  • backgroundColor : cor de fundo do editor
  • color : Cor do texto do editor
  • Cursor caretColor /cor de seleção
  • placeholderColor : editor colorção de texto de espaço reservado
  • contentCSSText : Conteúdo do editor Texto CSS （Válido inicial）
  • cssText : Editor Global CSS Text （Válido inicial)
  • initialCSSText : Injeta CSS no início da folha de estilo embutida. Útil para incorporar fontes personalizadas (veja abaixo).

• retorno de chamada onChange após modificação de dados do editor

• retorno de chamada onHeightChange APÓS A MUDANÇA DE ALTURA

• onMessage Retorno de chamada fora do processamento de tipo interno de pós -maquiagem

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

• command executar JS no editor

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

• commandDOM manipular o DOM no editor

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

• useContainer Um valor booleano que determina se um contêiner de visualização está envolvido na WebView. O valor padrão é verdadeiro. Se você estiver usando sua própria visão para envolver esta biblioteca, defina esse valor como false.

• styleWithCSS Quando o atributo de tags de estilo, é verdadeiro. Caso contrário, as tags dedicadas são criadas. O valor padrão é falso

• initialHeight UsoContainer é falso pela visão embutida da altura inicial

• pasteAsPlainText UM VALOR BOOLEAN (FALSE como padrão) que determina se a pasta de tábua de transferência manterá seu formato ou será feito como texto simples

• useCharacter A opção de desativar os caracteres chineses permite suportar caracteres em inglês sem erros no Android. Defina como true por padrão para compatibilidade com versões anteriores.

• defaultHttps Um valor booleano (true como padrão) que preende https: // para o início dos links

• Valor da pasta de onPaste

• Evento de keyup de retorno de chamada onKeyUp (Android 229 Bug)

• onKeyDown Callback Keydown Event (Android 229 Bug)

• onInput de retorno de chamada Valor

• link de retorno de chamada onLink clique

• Foco do editor de retorno de chamada onFocus

• Editor de retorno de chamada onBlur Blur

• onCursorPosition Retorno de chamada Digite a posição do cursor this.scrollRef.current.scrollTo({y: scrollY - 30, duration: 100, animated: true});

RichEditor também possui métodos que podem ser usados em seu ref para definir:

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

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

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

Usando fontes personalizadas

Para usar fontes personalizadas, você precisa usar initialCSSText no editorStyle Prop.

1. Carregue seus arquivos de fonte para https://transfonter.org e verifique a opção 'Base64'. Quando você baixar o arquivo zip, haverá um arquivo Stylesheet.css lá.
2. Pegue seu arquivo Stylesheet.css e crie um arquivo stylesheet.js .
3. Crie uma exportação e cole o conteúdo do arquivo CSS lá. por exemplo:

 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. Onde você incorporou seu componente RichEditor , importe o arquivo e utilize -o.

 import FontFamilyStylesheet from 'stylesheet.js' ;

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

5. Recarregue o aplicativo. Agora você deveria estar vendo o conteúdo do seu editor rico em seu rosto de fonte personalizado!

Para obter mais informações sobre como funciona initialCSSText , consulte o PR aqui. Além disso, o crédito a esse comentário de edição e seu garfo que descreve como usar o arquivo de fonte codificado Base64.

RichToolbar

Este é um componente que fornece uma barra de ferramentas para controlar facilmente um editor. Ele foi projetado para ser usado em conjunto com um componente RichEditor .

O RichToolbar tem uma propriedade necessária:

• getEditor()

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

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

• As funções onPressAddImage chamadas quando as ações addImage são tocadas.

• lógica onInsertLink para o que acontece quando você pressiona o botão Adicionar Inserir Link

• disabled

• Valor booleano para desativar o editor. O valor padrão é false .

• iconTint

• unselectedButtonStyle

• selectedIconTint

• selectedButtonStyle

• disabledIconTint

• disabledButtonStyle

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

• iconSize

  Define o tamanho do ícone em pixels. O padrão é 50.

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

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

Com ação personalizada:

Para definir sua própria ação personalizada:

• Envie seu nome de ação como string na matriz actions .
• Inclua um ícone para ele com o iconMap
• Adicione um suporte de função com o mesmo nome de ação a ser chamado

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

Um exemplo completo usando um 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 ;

---

Muito obrigado pelo apoio de jetbrains