wxik / react-native-rich-editor Goto Github PK
View Code? Open in Web Editor NEWLightweight React Native (JavaScript, H5) rich text editor
Home Page: https://wxik.github.io/react-native-rich-editor/web
License: MIT License
Lightweight React Native (JavaScript, H5) rich text editor
Home Page: https://wxik.github.io/react-native-rich-editor/web
License: MIT License
Hello how to clear the values after saving the data
Is there a way to change between edit mode and a viewer mode?
To allow users to switch between said modes
user should scroll manually to type at the end.
Can it scroll automatically new line added?
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?
Hi,
User should scroll manually to type at the end. But scroll is not working.
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.
Hi there, I want to remove the insert image
action in toolbar, can I do that??
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!
How to get the latest HTML in RN
在RN中如何获取最新的html
How do I add pictures from RN?
如何从RN这里添加图片?
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.
How can i show the vertical scroll in editor when the content is large
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
}}
/>
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?
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.
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.
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
<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
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.
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>
);
}`
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).
Plesae support edit text 'javascript' title in link
input modal
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 have open rich text editor page showing registered callable module (calling onMessage) his issure
Is there any function to replace the inserted images urls in editor after entering all the text and local or external images.
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.
selectedButtonStyle and selectedIconTint not working. Can someone help me !!!
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
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
Hi
i can't insert local image file:///
Thanks
Hi, Its grate but I need 2 more props underline and text color props. Can you tell me how to add this?
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.
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;
}
using ref i called getContentHtml() but i got "Possible Unhandled Promise Rejection (id: 0):
"timeout""
当编辑器获取焦点弹出键盘,调用keyboard.dismiss()不能收起键盘
I don't know why I can't use getContentHtml, please help
TypeError: Cannot read property 'getContentHtml' of null
Sometimes I need to set it as Dimensions.get('window').height * 0.5 or even less,
can we do that?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.