search

wxik / react-native-rich-editor

Lightweight React Native (JavaScript, H5) rich text editor
https://wxik.github.io/react-native-rich-editor/web
MIT License
780 stars 302 forks source link
editor react-native rich-editor rn wysiwyg wysiwyg-editors

readme

React Native Rich Text Editor

NPM

A fully functional Rich Text Editor for both Android and iOS (macOS and windows)?

If you want to use flutter, you can check here to add flutter_rich_editor

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

Also, follow instructions here to add the native react-native-webview dependency.

Scroll problem

usecontainer = {true} Need to be placed in ScrolView and add a callback method oncursorPosition to handle scroll bar positioning, refer to Examples

this.scrollRef.current.scrollTo({y: scrollY - 30, animated: true});

RichEditor

The editor component. Simply place this component in your view hierarchy to receive a fully functional Rich text Editor.

RichEditor takes the following optional props:

RichEditor also has methods that can be used on its ref to set:

This method registers a function that will get called whenver the cursor position changes or a change is made to the styling of the editor at the cursor's position., The callback will be called with an array of actions that are active at the cusor position, allowing a toolbar to respond to changes.

Example Usage:

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

Using Custom Fonts

In order to use custom fonts, you need to use initialCSSText from the editorStyle prop.

  1. Upload your font files to https://transfonter.org and check the 'base64' option. When you download the zip file, there will be a stylesheet.css file there.
  2. Take your stylesheet.css file and create a stylesheet.js file.
  3. Create an export and paste the contents of the css file there. e.g.: 
    
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. Where you've incorporated your `RichEditor` component, import the file and utilize it.
```javascript
import FontFamilyStylesheet from 'stylesheet.js';

const fontFamily = 'Your_Font_Family';
const initialCSSText = { initialCSSText: `${FontFamilyStylesheet}`, contentCSSText: `font-family: ${fontFamily}` }
<RichEditor editorStyle={initialCSSText}/>
  1. Reload the app. You should now be seeing your Rich Editor content in your custom font face!

For more info on how initialCSSText works, check out the PR here. Also, credit to this issue comment and his fork that describes how to use the base64 encoded font file.

RichToolbar

This is a Component that provides a toolbar for easily controlling an editor. It is designed to be used together with a RichEditor component.

The RichToolbar has one required property:

Which must provide a function that returns a ref to a RichEditor component.

This is because the ref is not created until after the first render, before which the toolbar is rendered. This means that any ref passed directly will inevitably be passed as undefined.

Other props supported by the RichToolbar component are:

Example Usage:

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

With Custom Action:

To define your own custom action:

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

A Complete Example Using a Functional Component

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;

Thank you very much for the support of JetBrains

https://jb.gg/OpenSource