wxik / react-native-rich-editor Goto Github PK

I don't know why I can't use getContentHtml, please help

TypeError: Cannot read property 'getContentHtml' of null

I have an html content with 700px width.

This is my content on react-native-webview:

All looks good, I can zoom in or zoom out and also I can scroll it vertically and horizontally.

But when I implement react-native-pell-rich-editor to edit the content, the width fixed to the device screen width:

Need solution for this.
Thank you in advance.

using ref i called getContentHtml() but i got "Possible Unhandled Promise Rejection (id: 0):
"timeout""

Hi,

User should scroll manually to type at the end. But scroll is not working.

Hi, I'm looking at how to add text to the current position on the editor.

I'm working on a screen that allow the user to insert emoji/predefined text while writing.

I cannot find how to do it on the code and I'm happy to work on it and provide a PR once done.

Just checking if it is already done or working on it currently.

  <View style={[ {height: 300/825*height}]}>
            <ScrollView  ref={that.scrollRef} style={[styles.scroll, themeBg]} keyboardDismissMode={'none'}>
                <RichEditor
                    // initialFocus={true}
                    editorStyle={contentStyle} // default light style
                    containerStyle={{paddingBottom:10/825*height, height:300/825*height}}
                    ref={that.richText}
                    style={[styles.rich, themeBg]}
                    placeholder={''}
                    useContainer={false}
                    editorInitializedCallback={that.editorInitializedCallback}
                    onChange={that.handleChange}
                    onHeightChange={that.handleHeightChange}
                />

            </ScrollView>
            </View>

this is the code i am trying to work with, where style scroll is
scroll: {
flex:1,
backgroundColor: 'green',
height: 300/825height
// marginTop:10/825height,
// paddingBottom:20/825height
},
rich: {
minHeight: 300/825height,
flex: 1,
},
but i'm not able to scroll through the RichEditor

import React, { useEffect, useState, useCallback, useContext, createRef } from 'react'
import { Button, KeyboardAvoidingView, SafeAreaView, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
import { RichEditor, RichToolbar } from 'react-native-pell-rich-editor';

const initHTML = `

const Example = props => {
const richText = createRef();

const save = async () => {
    // Get the data here and call the interface to save the data
    let html = await richText.current?.getContentHtml();

    console.log('html', html)
    // console.log(html);
    alert(html);
}

const onPressAddImage = () => {
    // insert URL
    richText.current?.insertImage(
        'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1024px-React-icon.svg.png',
    );
    // insert base64
    // richText.current?.insertImage(`data:${image.mime};base64,${image.data}`);
    richText.current?.blurContentEditor();
}

const onHome = () => {
    props.navigation.push('index');
}

return (
    <SafeAreaView style={styles.container}>
        <View style={styles.nav}>
            <Button title={'HOME'} onPress={onHome} />
            <Button title="Save" onPress={save} />
        </View>
        <ScrollView >
            <View>
                <View style={styles.item}>
                    <Text>To: </Text>
                    <TextInput style={styles.input} placeholder={'[email protected]'} />
                </View>
                <View style={styles.item}>
                    <Text>Subject: </Text>
                    <TextInput style={styles.input} placeholder='Rich Editor Bug 😀' />
                </View>
            </View>
            <RichEditor ref={richText} initialContentHTML={initHTML} style={styles.rich} />
        </ScrollView>
        <RichToolbar
            style={styles.richBar}
            editor={richText}
            iconTint={'#000033'}
            selectedIconTint={'#2095F2'}
            selectedButtonStyle={{ backgroundColor: 'transparent' }}
            onPressAddImage={onPressAddImage}
            getEditor={() => richText}
        />
    </SafeAreaView>
)

}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
nav: {
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 5,
},
rich: {
minHeight: 300,
flex: 1,
},
richBar: {
height: 50,
backgroundColor: '#F5FCFF',
},
scroll: {
backgroundColor: '#ffffff',
},
item: {
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: '#eee',
flexDirection: 'row',
height: 40,
alignItems: 'center',
paddingHorizontal: 15
},

input: {
    flex: 1
}

});

export { Example } @astulip

Am on react native 0.57 and Programmatic focus on the text area not opening the keyboard on both ios(13.0.1) and android (latest).

Hello how to clear the values after saving the data

Hi there, I want to remove the insert image action in toolbar, can I do that??

I was search for a Rich Text Editor, and thought that i finally found one..

But after installing, i found so many issues in it which took of my time to fix, more time than actually building it..

Some of what i found:

• RENAME YOUR IMAGES PATH!
  if you renamed your image (@2x, @3x ..) at least rename their path!

• RUN BEFORE YOU COMMIT!
  A simple error occurred in index.js that says something about exporting.. and after checking it apparently you can't export without giving it a naming, but after i exported each alone it did the work..

But honestly after reaching this point. Please give it more focus.. it can be useful!

Have a good day.

I am using react-native-pell-rich-editor in my react-native application, How can we autofocus the cursor as soon as the editor is open in the react-native application.

When I insert a image with base64 data, sometimes it didn't show on webview.
I checked post message and it sent data to webview but don't know why it didn't show.
Can you help me check it.

    onPressAddImage = () => {
        const options = {
            quality: 1.0,
            maxWidth: 500,
            maxHeight: 500,
            storageOptions: {
                skipBackup: true,
            },
        };

        ImagePicker.showImagePicker(options, response => {
            console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled photo picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                // let source = { uri: response.uri };

                // You can also display the image using data:
                let source = { uri: 'data:image/jpeg;base64,' + response.data };
                this.richText.insertImage(source.uri);
                this.richText.blurContentEditor();
            }
        });
    }

Link video: https://drive.google.com/file/d/1OnyupxgwNzWkgVJ_5G5Qa3cGEaNImEHv/view?usp=sharing

BTW, this is a great library.

Hi

i can't insert local image file:///

Thanks

its a great library thank u for that but i want to also let people edit textColor but i could not .
Can u please show me how to do

How to get the latest HTML in RN
在RN中如何获取最新的html

How do I add pictures from RN?
如何从RN这里添加图片？

Plesae support edit text 'javascript' title in link input modal

function getDefaultIcon() { const texts = {}; texts[actions.insertImage] = require('../img/icon_format_media.png'); texts[actions.setBold] = require('../img/icon_format_bold.png'); texts[actions.setItalic] = require('../img/icon_format_italic.png'); texts[actions.insertBulletsList] = require('../img/icon_format_ul.png'); texts[actions.insertOrderedList] = require('../img/icon_format_ol.png'); texts[actions.insertLink] = require('../img/icon_format_link.png'); return texts; }
The imgs here are not existing in the img file which cause test running failed.

I dont know why, but I have some screens, and on the one of them i have your pell rich editor, and when i go to screen in witch i have this editor and go out is okey, but when i go to this screen and text something in your editor and then click backbutton my app show black screen and close. I suppose this is a webview problem, but I'm not sure. In console logs i have nothing and i not get warnings, just nothing that could guide me why this is happening.

Hi, I'm using [email protected]. Is there any way to detect if user just click one of the action provided in the list of action passed to the RichToolbar? My intention is I want to invoke some function when user click one of the action.

Hello, can you please provide a good example to use.
Docs provided is not enough for the moment to use this lib with the full power of the creator.

Thanks for your impact to react-native!

Hey,

I am trying to catch an event which gets triggered as soon as this editor is focussed.

Can you please help me achieve this?

I am trying to edit the height, but it doesn't change at
I tried this

<RichEditor
              ref={rf => (this.richText = rf)}
              initialContentHTML={values.about}
              style={{
                minHeight: 50,  // this doesn't work
                height: 50 // this also doesn't work

              }}
            />

user should scroll manually to type at the end.
Can it scroll automatically new line added?

Sometimes I need to set it as Dimensions.get('window').height * 0.5 or even less,
can we do that?

I want to add a placeholder text to react-native-pell-rich-editor, How can we do that?
Is it possible to add a placeholder in react-native-pell-rich-editor?

I have open rich text editor page showing registered callable module (calling onMessage) his issure

AndroidRuntime: FATAL EXCEPTION: main
Process: com.meadow9, PID: 25469
java.lang.NullPointerException: Attempt to invoke virtual method 'boolean com.swmansion.rnscreens.ScreenContainer.isTransitioning()' on a null object reference

Above is the error when is try to launch the app

Hi, Its grate but I need 2 more props underline and text color props. Can you tell me how to add this?

Is there a way to change between edit mode and a viewer mode?

To allow users to switch between said modes

How can I add more actions. I go into library and add action "heading1" like code below. But when I press it in RichToolbar, it not working.

const defaultActions = [
  actions.insertImage,
  actions.setBold,
  actions.setItalic,
  actions.insertBulletsList,
  actions.insertOrderedList,
  actions.insertLink,
  actions.heading1
];

function getDefaultIcon() {
  const texts = {};
  texts[actions.insertImage] = require('../img/icon_format_media.png');
  texts[actions.setBold] = require('../img/icon_format_bold.png');
  texts[actions.setItalic] = require('../img/icon_format_italic.png');
  texts[actions.insertBulletsList] = require('../img/icon_format_ul.png');
  texts[actions.insertOrderedList] = require('../img/icon_format_ol.png');
  texts[actions.insertLink] = require('../img/icon_format_link.png');
  texts[actions.heading1] = require('../img/close.png');
  return texts;
}

First congratulations on the lib. It was very simple to install and worked seamlessly :)

I'm developing a dark-themed app and now I have only the rich editor with a white background.

当编辑器获取焦点弹出键盘，调用keyboard.dismiss()不能收起键盘

react-native info:

problem like blew:

Is there any function to replace the inserted images urls in editor after entering all the text and local or external images.

selectedButtonStyle and selectedIconTint not working. Can someone help me !!!

How can i show the vertical scroll in editor when the content is large

rn 0.61.0
with react-navgation 5

function RTFEditor({route, onSave}) {
 const text = route.params?.text ?? '';
 let richText = React.createRef();

 useFocusEffect(
   React.useCallback(() => {
     richText.current.focusContentEditor();
     return () => {
     };
   }, []),
 );
 const _onSavePress = () => {};
 const _onPressAddImage = () => {};
 const onEditorInitialized = () => {
   console.log('ready');
   richText.current.focusContentEditor();
 };
 return (
   <SafeAreaView>
     <Appbar.Header>
       <Appbar.BackAction
         onPress={() => {
           onBack();
         }}
       />
       <Appbar.Content title="" subtitle="" />
       <Button mode="contained" onPress={() => _onSavePress()}>
         {ci18n.t('Save')}
       </Button>
     </Appbar.Header>

     <ScrollView style={styles.scroll}>
       <RichEditor
         ref={richText}
         initialContentHTML={text}
         style={styles.rich}
         editorInitializedCallback={() => onEditorInitialized()}
       />
     </ScrollView>
     <KeyboardAvoidingView behavior={'padding'}>
       <RichToolbar
         style={styles.richBar}
         getEditor={() => richText.current}
         iconTint={'#000033'}
         selectedIconTint={'#2095F2'}
         selectedButtonStyle={{
           backgroundColor: 'transparent',
         }}
         onPressAddImage={_onPressAddImage}
       />
     </KeyboardAvoidingView>
   </SafeAreaView>
 );

}`