https://github.com/chrisnharvey/react-native-rte

Rich Text Editor for React Native (based on Quill.js)
https://github.com/chrisnharvey/react-native-rte

Last synced: about 4 hours ago
JSON representation

Rich Text Editor for React Native (based on Quill.js)

• Host: GitHub
• URL: https://github.com/chrisnharvey/react-native-rte
• Owner: chrisnharvey
• License: lgpl-3.0
• Created: 2019-03-09T14:02:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-06-23T10:41:57.000Z (over 4 years ago)
• Last Synced: 2024-05-01T23:30:06.733Z (7 months ago)
• Language: HTML
• Homepage:
• Size: 373 KB
• Stars: 19
• Watchers: 4
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Rich Text Editor

A rich text editor for React Native based on Quill.js.

Compatible with iOS and Android.

## Installation

Install React Native Rich Text Editor using npm:

```

npm install react-native-rte --save

```

Link react-native-webview:

```

react-native link react-native-webview

```

## Example

```jsx

import React, { Component } from 'react';

import { SafeAreaView, KeyboardAvoidingView } from 'react-native';

import { RichText, Bold, Italic, OrderedList, UnorderedList, Link, Media } from 'react-native-rte'

export default class App extends Component {

  addLink(editor) {

    // Logic for opening a modal for URL entry here.....

    editor.trigger('format', 'link', 'https://example.com')

  }

  selectMedia(editor) {

    // Logic for opening an image selector here

    editor.getSelection().then(function(payload) {

      // Base64 Data

      editor.trigger('insertEmbed', payload ? payload.index : 0, 'image', 'data:image/jpeg;base64,BASE64DATA')

      // Or an image URL

      editor.trigger('insertEmbed', payload ? payload.index : 0, 'image', 'http://example.com/image.jpg')

    })

  }

  render() {

    return (

      

        

          

            

            

              

              

              

              

              

              

            

          

        

      

    )

  }

}

```