wix-incubator / react-native-zss-rich-text-editor

React Native rich text editor based on ZSSRichTextEditor

React Native Rich Text Editor

A fully functional Rich Text Editor for both Android and iOS, based off the ZSSRichTextEditor project.

Installation

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

On Android, add the following to the end of your 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'))
}

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

Usage

react-native-zss-rich-text-editor exports two Components and one const dictionary:

RichTextEditor

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

RichTextEditor takes the following optional props:

• initialTitleHTML

  HTML that will be rendered in the title section as soon as the component loads.

• initialContentHTML

  HTML that will be rendered in the content section on load.

• titlePlaceholder

  Text that will be used as a placeholder when no text is present in the title section.

• contentPlaceholder

  Text that will be used as a placeholder when no text is present in the content section.

• customCSS

  Any custom CSS styles that you want to inject to the editor.

• editorInitializedCallback

  A function that will be called when the editor has been initialized.

RichTextEditor also has methods that can be used on its ref to set styling at the current selection or cursor position:

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

This method shows a dialog for setting a link title and url, that will be inserted at the current cursor location.

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

To adjust content, placeholders or css, use these methods

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

These methods are used when adding content such as images or links that will intefere with the cursor position. prepareInsert saves the current selection, and restoreSelection will replace it after the insertion is done. It is called implicitly by insertImage and insertLink so they should probably never be called directly.

• prepareInsert()
• restoreSelection()

To get the content or title HTML, use these asynchronous methods.

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

To focus or blur sections, use these methods

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

To know when the title or content are in focus, use the following methods.

• setTitleFocusHandler(callbackHandler)
• setContentFocusHandler(callbackHandler)

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.

• registerToolbar(listener)

Example Usage:

<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

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

The RichTextToolbar has one required property:

• getEditor()

Which must provide a function that returns a ref to a RichTextEditor 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 RichTextToolbar component are:

• actions

  An array of actions to be provided by this toolbar. The default actions are:

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

• onPressAddLink

• onPressAddImage

  Functions called when the addLink or addImage actions are tapped.

• selectedButtonStyle

• iconTint

• selectedIconTint

• unselectedButtonStyle

  These provide options for styling action buttons.

• renderAction

  Altenatively, you can provide a render function that will be used instead of the default, so you can fully control the tollbar design.

• iconMap

  RichTextToolbar comes with default icons for the default actions it renders. To override those, or to add icons for non-default actions, provide them in a dictionary to this prop.

Example Usage:

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

actions

This is a set of consts of all supported actions. These will be passed in arrays to all callbacks registered with the editor using the registerToolbar() method.

{
	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',
}

Attribution

react-native-zss-rich-text-editor is a wrapper around the amazing ZSSRichTextEditor project. It also communicates with the editor using (a tiny fork) of the awesome react-native-webview-bridge project.

react-native-zss-rich-text-editor's Issues

Cannot delete image in some cases

Hi all,

I'm running into an issue where I cannot delete an image that I just inserted. I suspect I'm missing something obvious, given that no one else has mentioned this issue yet. Any pointer will be greatly appreciated, thanks!

Repro steps:

1. Insert an image.

2. Type some letters, e.g. Abc. After this step, the argument str in RichTextEditor.onBridgeMessage will be:

{
  "type": "CONTENT_CHANGE",
  "data": {
    "content": "<br><img src=\"http://example.com/image.png\">Abc",
    "contentText": "Abc"
  }
}

3. Move the caret to the front of the line Abc.

4. Click backspace.

Expected behavior:
The image should get deleted.

Actual behavior:
Both the image and the words remain. After step 4, the argument str in RichTextEditor.onBridgeMessage will be:

{
  "type": "CONTENT_CHANGE",
  "data": {
    "content": "<br><img src=\"http://example.com/image.png\"><span style=\"font-size: 1em;\">A</span><span style=\"font-size: 1em;\">b</span><span style=\"font-size: 1em;\">c</span><br>",
    "contentText": "Abc"
  }
}

Focus of text inside a table, scrolls the Editor to top

Hi,

I am using a table in my RichTextEditor, when i am clicking on the text inside the table the editor scrolls to the top, this happens everytime when i click the text inside the table

Is there any other way to tackle this?

Thanks,
Dhiraj

Can not focus RichTextEditor when clear text

When I delete all text in RichTextEditor, keyboard auto hidden and I can not refocus RichTextEditor. Please help me !

After following instructions: Can't Find Variable: RichTextEditor

Is there a step missing? How does the code for this project get pulled into the app?

This is on iOS.

RichTextEditor is not showing content by props

Hello thanks for your component, but i'm having an issue, i'm following your example with RN 0.39.2 this is the result.

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

when i print props from RichTextEditor.js i get this

sigh.. but is not rendering nothing...

UPDATE.

Ok, is working all ok, i was testing on iPad simulator with ios 8.2... i think is not compatible with this iOS versión, but i would be good that it was.
thanks

How to insert a Image?

How to insert a Image?

Maybe AztecEditor is better?

AztecEditor is a wordpress new editor, and it supports iOS and Android.

Maybe it is a better native editor for RN.

• iOS
• Android

Can the editor be rendered without a title input?

I don't need a title input, only the content input. Can the title input be disabled or hidden?

Does not compile under React Native version 0.40.0

Perhaps related to React Native' last breaking change:

alinz/react-native-webview-bridge#199

https://github.com/facebook/react-native/releases/tag/v0.40.0

adjust image width and height before render

Hello,

How can i adjust image width and height before render. Image width look autoresize but height not.

How to disable touch?

Hello.Sometimes I need to disable focus on the textinpunt . How to make it?
Best Regards

Richtext Toolbar hide behind keyboard

The rich text toolbar hide behind keyboard when keyboard is show.

When i focus on the content/title text input to edit the content, the keyboard is appear but its hide the rich text tool bar so i can't able to apply bold,italic and some other styles to text. My code...

`

<ScrollView>
    <View style={{height:300}}>
      <RichTextEditor
        ref={(r) => this.richtext = r}
        titlePlaceholder='Title...'
        contentPlaceholder='Content...'
        editorInitializedCallback={() => this.onEditorInitialized()}
      />
      <RichTextToolbar
      getEditor={() => this.richtext}
      actions={defaultActions}
      iconTint='black'
      selectedButtonStyle={{backgroundColor:'yellow'}}
      />
    </View>
        .....
   </ScrollView>

I have scrollview because i had more components in a single screen screen. without scrollview also tool bar doesn't show when keyboard appears.

How to make it to display tool bar when key board appears?

cannot select text on android

hi! when I run the example project, I cannot select a word in android 6.0.1

anyone had this issue?
apparently it is influenced by android version, since it works on 4.4 in simulator

Editor Snaps Up When Scrolling to the Bottom of the Screen (iOS only)

Platform: iOS
Packages:
"react": "15.4.2",
"react-native": "0.42.0",
"react-native-zss-rich-text-editor": "file:../",
"react-native-keyboard-spacer": "^0.3.0"

I ran the example app and noticing this issue:

Anybody else having the same problem and know how to fix it?

Build fails with "React/RCTBridgeModule.h file not found"

I cannot build the code

After cloning the repo

• npm install in main dir
• npm install in example dir
• open ios/example.xcproject

build => fail

How to show toolbar only when Content focused?

I only use content input, and hide title input.
So, i want when focus on content input then the toolbar to be show, other onblur, the toolbar will hide?

How to remove the title?

Hi,

I have a requirement where i just need the editor not the title, is there a way to get rid of the title?

Thanks,
Dhiraj

Why title support styles?

how do prevent RichTextToolbar from being used in the title?

Put the toolbar above the Editor

I am implementing react-native-zss-rich-text-editor in my project and would like to put the RichTextToolbar above the RichTextEditor while rendering. How can I do that as the RichTextToolbar needs a reference to the RichTextEditor

I have tried this but still does not work

{ this.state.isrichtextLoaded === true
          ? <RichTextToolbar
            getEditor={() => this.richtext}/>
          : null
        }
                <RichTextEditor
                  ref={(r) => this.richtext = r}
                  >
                </RichTextEditor>

and have set isrichtextLoaded to true in componentDidMount but I get an error Toolbar has no editor

Example throwing error

I am trying to run the example u provided on Nexus android emulator. But i dont see the textinput field also and onclick of the icons below(image, bold, italics, etc) it throws an error.

Please do help to resolve this

problem with bullets/lists

If there's only one item and it gets deleted, the cursor disappears and can't be focused again if you touch the editor

I recorded it so you can understand better what is happening

I noticed that, you can still edit if you don't touch the editor. If you add a new line and delete it, the cursor comes back and you can touch the editor without losing the focus

I also recorded when that happens

Maybe there's a way to disable touch or focus?

'onChange' event

Is there something like 'onChange' event of content?

Formatting Issue when Changing focus

Hey,
The issue is that the format changes when switching between title and content.

Repro Steps:

1. Bring the cursor to the content section
2. Make any formatting change with the toolbar. (i.e. select Bold, italic etc)
3. Move the cursor from content to title

The format change made in step 2 would not stay.

it makes some problem

the pickture can't add

Title is focusing even if hiddenTitle prop enabled

Even if hiddenTitle prop is set to true, title is rendered and focused on initial editor load before title is hidden. Is there possibility to somehow control if it should be focused?

Right now it looks weird when keyboard is jumping (show/hide) in initial load.

Support 15.5.0?

How to support PropTypes and createClass?

Build Failed with Error type 3

Starting: Intent { cmp=com.example/.MainActivity }
Error type 3
Error: Activity class {com.example/com.example.MainActivity} does not exist.

Can anyone help me with this problem?

undefined is not an object RCTWebViewBridgeManager.NavigationType

The toolbar cannot action at all

I have tried to develop the React Native Zss Rich Text Editor until this stage but the action doesn't function at all, when I input the text and want to format it to bold style it cannot be selected and the image and attachment actions also doesn't function at all. And the title with the content should have the placeholder but it is blank as shown as the image above. Please advice and appreciate for the help. Thank you.

How to hide/disable the title part of the editor

For my application I don't need the title part of the editor. Is there a way to disable it?

can't make insert link work...

Allways that i want to insert a link in the selected text, is not showing nothing after the popups out, i just alert the htmlContent from the richtext and there is no <a> tag.

Crash on Android: undefined is not an object (evaluating 'UIManager.RCTWebViewBridge.Commands')

Hi! I am having an issue on android. When I press any button from the toolbar I get an error.
I know the error is not really from this package, it's from react-native-webview-bridge-updated which is a fork made by you and listed as a dependency for this package.

Anyone has any idea on how to fix this?

Insert image tapped not working

Hi,
Thank you for this lib. Everythings work fine but when i click insert image button in toolbar nothing happen, I wonder what the problem could be ?

your log is showing

At line 72 there's a log, it shows...

TypeError: Cannot read property 'NavigationType' of undefined

Trying out your example code gets me stuck here
Same with trying to integrate the editor component in a project ...
What is the reason that libs that are supposed to work as is are throwing this error?
Any ideas how to fix this? Anyone integrated the component with success yet ?

Adding images

Do I add images to the editor using the image react native tag or do I just need to supply the data uri

Icons for richtexttool

The preview of other icons beside from the default are rendered blank.
I already imported other icons but no luck..

can't delete Image on android

can't delete Image on android.....

toolbar action is not working

I run example program toolbar action is not worked

The Editor works fine in iOS but Android didn't work

Hi, Sir, I was able to use the editor and the toolbar actions works well in iOS platform but it doesn't work in Android (The content also didn't display in the editor on Android). Please help to rectify this issue. Thank you. Below is the screenshot of use your editor in the app:

in iOS:

in Android:

how to get all html string?

I want get all html string，not just title and Content,how to get it?

this.richtext.insertLink no work

===============render function========================
<RichTextEditor
ref={(r)=>this.richtext = r}
style={styles.richText}
titlePlaceholder={'Title!!'}
contentPlaceholder={'Hello World

this is a new paragraph

this is another new paragraph

'}
editorInitializedCallback={() => this.onEditorInitialized()}
/>
<RichTextToolbar
getEditor={() => this.richtext}
actions={["setBold","insertLink","updateLink"]}
iconMap={{setBold:require('../../img/icon/nav_fuli_normal.png'),insertLink:require('../../img/nav_shequ_nomal.png'),updateLink:require('../../img/nav_shequ_nomal.png')}}
renderAction={(data)=>{return
(<View key={data} style={{flex:1,width:100,backgroundColor:"blue"}}>
<Text style={{textAlign:"center"}} onPress={this[data].bind(_this)}>{data}
)}}
/>

===============method==============================
insertLink(){
this.richtext.insertLink("http://img.dwstatic.com/www/1707/364930545550/1500975529856.jpg", "sfsafdfsadfd")
}
=====================my code end======================

The insertLink function is work,but “ this.richtext.insertLink” . I do not know that what i shoud do.

importing RichTextEditor from react-native-zss-rich-text-editor gives me error

i've been struggling with this for long now i don't know what wrong did i do

• install editor by npm i --save react-native-zss-rich-text-editor

• add the following to the end of your 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')) }

• install webview bridge by npm install react-native-webview-bridge --save

• add the following code in MainApplication.java
import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage; protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new WebViewBridgePackage() //<- this ); }

• add the following codes to your android/setting.gradle
include ':app', ':react-native-webview-bridge' project(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android')

-edit android/app/build.gradle and add the following line inside dependencies
compile project(':react-native-webview-bridge')

in my code
import { RichTextEditor, RichTextToolbar } from 'react-native-zss-rich-text-editor';

focusContent doesn't work

After initialized Rich editor I invoke focus content and nothing happens

react-native version : 0.44.0
rich editor version :1.0.2

Rich text editor height

The richtext editor height cannot set or automatically adjust to occupy the whole screen( by setting the style into flex: 1).

paste not working

when I do a copy and paste on android 5.1.1 emulator, the paste fails. anyone encountered this?

Webview bridge is part of React Native core

I found this on the react-native-webview-bride which states that the library has been added to React Native 0.37. Are there any plans on removing your dependency on this library in the future?

Relicense to standard MIT?

I'd like to use this component but EMIT isn't an OSI approved license.

FAILURE: Build failed with an exception

I got this error when i build release app

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeReleaseResources'.
> C:\Projects\ReactNative\ABC\android\app\src\main\res\drawable-mdpi\node_modules_reactn
ativezssrichtexteditor_src_editor.html: Error: The file name must end with .xml or .png

AutoHeight

How do I make the height of the Editor Automatically grow based on the HTML Content ?