React Native Wrapper for WordPress Rich Text Editor
Objective-C Java JavaScript Python
Latest commit 5b5d4ef Nov 20, 2016 @rotemmiz rotemmiz 2.0.1

README.md

React Native WordPress Rich Text Editor

React Native Wrapper for WordPress Rich Text Editor. The WordPress-Editor is the text editor used in the official WordPress mobile apps to create and edit pages & posts. In short it's a simple, straightforward way to visually edit HTML.


Dependencies

How is integration possible?

It isn't trivial to intergrate the WordPress editor with React Native because it is exposed in native code as a UIViewController and not a UIView. React Native only has internal support for integrating native UIViews by wrapping them as React components.

In order to integrate a UIViewController with RN, we have to turn to the library react-native-navigation which fully supports native app skeletons with View Controllers. If you're interested in how it's achieved, take a look at the following internal dependency of this awesome library.

Installation

  • Make sure your project relies on React Native >= 0.25

  • Make sure your project uses react-native-navigation and that you've followed the Installation instructions there

  • In your RN project root run:
    npm install react-native-wordpress-editor --save

  • Open your Xcode project and drag the folder node_modules/react-native-wordpress-editor/ios into your project

Usage

For a fully working example look here

First, create a placeholder screen for the editor. The main purpose of this screen is to handle navigation events. See an example here.

Note: Make sure your screen component has been registered with Navigation.registerComponent like all react-native-navigation screens need to be, example.

Now, to display your screen, from within one of your other app screens, push the editor:

this.props.navigator.push({
  screen: 'example.EditorScreen',
  title: 'Preview',
  passProps: {
    externalNativeScreenClass: 'RNWordPressEditorViewController',
    externalNativeScreenProps: {
      // the post to open in the editor, leave empty for no post
      post: {
        // title of the post
        title: 'Hello WorldPress', 
        // html body of the post
        body: 'cool HTML body <br><br> <img src="https://www.wpshrug.com/wp-content/uploads/2016/05/wordpress-winning-meme.jpg" />'
      },
      // if no post shown, these placeholders will appear in the relevant fields
      placeHolders: {
        title: 'title',
        body: 'body'
      }
    }
  }
});

API Reference

Once the editor screen is displayed, you can communicate with it using a JS interface.

import EditorManager from 'react-native-wordpress-editor';
  • EditorManager.setEditingState(editing: boolean)
    Switch between editing and preview modes (accepts a boolean).

  • EditorManager.resetStateToInitial()
    Reset to the initial state right after the screen was pushed (with original props).

  • EditorManager.isPostChanged(): Promise<boolean>
    Returns a promise of a boolean (since it's async) whether the state is still the initial one.

  • EditorManager.getPostData(): Promise<{title: string, body: string}>
    Returns a promise of a simple object holding the title and HTML body of the post.

  • EditorManager.addImages(images: Array<{url: string}>)
    Adds images at the current cursor location in the editor, takes an array of simple objects with the url of each image.

Credits and Attributions

This project depends on:

License

See LICENSE