Skip to content

Commit b76ea71

Browse files
imnapoimnapo
authored
Update README.md
1 parent bb8f042 commit b76ea71

1 file changed

Lines changed: 141 additions & 101 deletions

File tree

‎README.md‎

Lines changed: 141 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -19,157 +19,194 @@ yarn add react-native-cn-richtext-editor
1919
```
2020
### Usage
2121

22-
Here is an overview of the components usage.
22+
Here is a simple overview of our components usage.
2323

2424
```
2525
import React, { Component } from 'react';
2626
import { View, StyleSheet, Keyboard
27-
, TouchableWithoutFeedback
28-
, KeyboardAvoidingView, Platform } from 'react-native';
29-
import CNRichTextEditor , { CNToolbar, getInitialObject } from "react-native-cn-richtext-editor";
27+
, TouchableWithoutFeedback, Text
28+
, KeyboardAvoidingView } from 'react-native';
3029
31-
export default class App extends Component {
30+
import CNRichTextEditor , { CNToolbar, getInitialObject , getDefaultStyles } from "react-native-cn-richtext-editor";
3231
32+
const defaultStyles = getDefaultStyles();
33+
34+
class App extends Component {
35+
3336
constructor(props) {
3437
super(props);
35-
38+
3639
this.state = {
3740
selectedTag : 'body',
3841
selectedStyles : [],
3942
value: [getInitialObject()]
4043
};
4144
42-
this.editor = null;
45+
this.editor = null;
4346
}
4447
4548
onStyleKeyPress = (toolType) => {
46-
if (toolType !== 'image') {
47-
this.editor.applyToolbar(toolType);
48-
}
49-
else {
50-
// Handling image ...
51-
}
49+
this.editor.applyToolbar(toolType);
5250
}
53-
54-
onSelectedTagChanged = (tag) => {
55-
this.setState({
56-
selectedTag: tag
57-
})
58-
}
59-
60-
onSelectedStyleChanged = (styles) => {
61-
this.setState({
62-
selectedStyles: styles
63-
})
64-
}
6551
66-
onValueChanged = (value) => {
67-
this.setState({
68-
value: value
69-
});
70-
}
52+
onSelectedTagChanged = (tag) => {
53+
this.setState({
54+
selectedTag: tag
55+
})
56+
}
57+
58+
onSelectedStyleChanged = (styles) => {
59+
this.setState({
60+
selectedStyles: styles,
61+
})
62+
}
7163
72-
render() {
73-
return (
74-
<KeyboardAvoidingView
75-
behavior="padding"
76-
enabled
77-
keyboardVerticalOffset={0}
78-
style={{
79-
flex: 1,
80-
paddingTop: Platform.OS == 'ios' ? 20 : 0,
81-
backgroundColor:'#eee',
82-
flexDirection: 'column',
83-
justifyContent: 'flex-end'
84-
}}>
85-
<TouchableWithoutFeedback onPress={Keyboard.dismiss} >
86-
<View style={styles.main}>
87-
<CNRichTextEditor
88-
ref={input => this.editor = input}
89-
onSelectedTagChanged={this.onSelectedTagChanged}
90-
onSelectedStyleChanged={this.onSelectedStyleChanged}
91-
value={this.state.value}
92-
onValueChanged={this.onValueChanged}
93-
style={{ backgroundColor : '#fff', padding : 10}}
94-
/>
64+
onValueChanged = (value) => {
65+
this.setState({
66+
value: value
67+
});
68+
}
69+
70+
71+
render() {
72+
return (
73+
<KeyboardAvoidingView
74+
behavior="padding"
75+
enabled
76+
keyboardVerticalOffset={0}
77+
style={{
78+
flex: 1,
79+
paddingTop: 20,
80+
backgroundColor:'#eee',
81+
flexDirection: 'column',
82+
justifyContent: 'flex-end',
83+
}}
84+
>
85+
<TouchableWithoutFeedback onPress={Keyboard.dismiss} >
86+
<View style={styles.main}>
87+
<CNRichTextEditor
88+
ref={input => this.editor = input}
89+
onSelectedTagChanged={this.onSelectedTagChanged}
90+
onSelectedStyleChanged={this.onSelectedStyleChanged}
91+
value={this.state.value}
92+
style={{ backgroundColor : '#fff'}}
93+
styleList={defaultStyles}
94+
onValueChanged={this.onValueChanged}
95+
/>
96+
</View>
97+
</TouchableWithoutFeedback>
98+
99+
<View style={{
100+
minHeight: 35
101+
}}>
102+
103+
<CNToolbar
104+
size={28}
105+
bold={<Text style={[styles.toolbarButton, styles.boldButton]}>B</Text>}
106+
italic={<Text style={[styles.toolbarButton, styles.italicButton]}>I</Text>}
107+
underline={<Text style={[styles.toolbarButton, styles.underlineButton]}>U</Text>}
108+
lineThrough={<Text style={[styles.toolbarButton, styles.lineThroughButton]}>S</Text>}
109+
body={<Text style={styles.toolbarButton}>T</Text>}
110+
title={<Text style={styles.toolbarButton}>h1</Text>}
111+
heading={<Text style={styles.toolbarButton}>h3</Text>}
112+
ul={<Text style={styles.toolbarButton}>ul</Text>}
113+
ol={<Text style={styles.toolbarButton}>ol</Text>}
114+
115+
selectedTag={this.state.selectedTag}
116+
selectedStyles={this.state.selectedStyles}
117+
onStyleKeyPress={this.onStyleKeyPress} />
95118
</View>
96-
</TouchableWithoutFeedback>
97-
98-
<View style={{
99-
minHeight: 35
100-
}}>
101-
<CNToolbar
102-
selectedTag={this.state.selectedTag}
103-
selectedStyles={this.state.selectedStyles}
104-
onStyleKeyPress={this.onStyleKeyPress}
105-
size={28}
106-
bold={<MaterialCommunityIcons name="format-bold" />}
107-
italic={<MaterialCommunityIcons name="format-italic" />}
108-
underline={<MaterialCommunityIcons name="format-underline" />}
109-
lineThrough={<MaterialCommunityIcons name="format-strikethrough-variant" />}
110-
body={<MaterialCommunityIcons name="format-text" />}
111-
title={<MaterialCommunityIcons name="format-header-1" />}
112-
heading={<MaterialCommunityIcons name="format-header-3" />}
113-
ul={<MaterialCommunityIcons name="format-list-bulleted" />}
114-
ol={<MaterialCommunityIcons name="format-list-numbers" />}
115-
image={this.renderImageSelector()}
116-
foreColor={this.renderColorSelector()}
117-
highlight={this.renderHighlight()}
118-
/>
119-
</View>
120-
</KeyboardAvoidingView>
121-
);
122-
}
119+
</KeyboardAvoidingView>
120+
);
121+
}
122+
123123
}
124124
125125
var styles = StyleSheet.create({
126126
main: {
127127
flex: 1,
128-
paddingTop: 0,
128+
marginTop: 10,
129129
paddingLeft: 30,
130130
paddingRight: 30,
131131
paddingBottom: 1,
132132
alignItems: 'stretch',
133-
133+
},
134+
toolbarButton: {
135+
fontSize: 20,
136+
width: 28,
137+
height: 28,
138+
textAlign: 'center'
139+
},
140+
italicButton: {
141+
fontStyle: 'italic'
142+
},
143+
boldButton: {
144+
fontWeight: 'bold'
145+
},
146+
underlineButton: {
147+
textDecorationLine: 'underline'
148+
},
149+
lineThroughButton: {
150+
textDecorationLine: 'line-through'
134151
},
135152
});
136153
154+
155+
export default App;
156+
137157
```
158+
159+
## More Advanced TextEditor
160+
You need to put more effort :) to use more advanced features of CNRichTextEditor such as:
161+
- Image Uploading
162+
- Highlighting Text
163+
- Change Text Color
164+
165+
Actually we did not implement 'Toolbar buttons and menus' and 'Image Uploading Process' because it totally depends on using expo or pure react-native and also what other packages you prefer to use.
166+
167+
To see an example of how to implement more advanced feature of this editor please check this [Link](https://github.com/imnapo/react-native-cn-richtext-editor/blob/master/expo-demo/App.js).
168+
169+
Also be noticed that this example is writen with expo and required 'react-native-popup-menu' package.
138170
## Props
139171

140172
### CNRichTextEditor
141173

142-
| Name | Description |
143-
| ------ | ----------- |
144-
| onSelectedTagChanged | this prop triggers when selected tag of editor is changed. |
145-
| onSelectedStyleChanged | this prop triggers when selected style of editor is changed. |
146-
| value | javascript array object which keeps value of textinput |
174+
| Name | Description | Required |
175+
| ------ | ----------- | ---- |
176+
| onSelectedTagChanged | this event triggers when selected tag of editor is changed. | No |
177+
| onSelectedStyleChanged | this event triggers when selected style of editor is changed. | No |
178+
| onValueChanged | this event triggers when value of editor is changed. | No |
179+
| value | an array object which keeps value of the editor | Yes |
180+
| styleList | an object consist of styles name and values (use getDefaultStyles function) | Yes |
147181

148182
### CNToolbar
149183

150184
| Name | Required | Description |
151185
| ------ | ------ | ----------- |
152-
| selectedTag | Yes | selected tag of RichTextEditor. |
153-
| selectedStyles | Yes | selected style of RichTextEditor |
154-
| onStyleKeyPress | Yes | this event will be triggered when user press one of toolbar keys. |
186+
| selectedTag | Yes | selected tag of the editor |
187+
| selectedStyles | Yes | selected style of the editor |
188+
| onStyleKeyPress | Yes | this event triggers when user press one of toolbar keys |
155189
| size | No | font size of toolbar buttons |
156-
| bold | No | child component of bold button. you can use it to set an icon for bold button ( see expo-demo app) |
157-
| italic | No | child component of italic button |
158-
| underline | No | child component of underline button |
159-
| lineThrough | No | child component of lineThrough button |
160-
| body | No | child component of body button |
161-
| title | No | child component of title button |
162-
| ul | No | child component of ul button |
163-
| ol | No | child component of ol button |
164-
| image | No | child component of image button |
190+
| bold | No | a component which renders as bold button |
191+
| italic | No | a component which renders as italic button |
192+
| underline | No | a component which renders as underline button |
193+
| lineThrough | No | a component which renders as lineThrough button |
194+
| body | No | a component which renders as body button |
195+
| title | No | a component which renders as title button |
196+
| ul | No | a component which renders as ul button |
197+
| ol | No | a component which renders as ol button |
198+
| image | No | a component which renders as image button |
199+
| highlight | No | a component which renders as highlight button |
200+
| foreColor | No | a component which renders as foreColor button |
165201

166202

167203
### Functions
168204
| Name | Param | Returns | Description |
169205
| ------ | ------ | ------ |----------- |
170-
| getInitialObject | - | javascript object | create a initial value for RichTextEditor. |
171-
| convertToHtmlString | array | string | this function converts value of RichTextEditor to html string (use it to keep value as html in db) |
206+
| getInitialObject | - | javascript object | create a initial value for the editor. |
207+
| convertToHtmlString | array | string | this function converts value of editor to html string (use it to keep value as html in db) |
172208
| convertToObject | string | array | converts html back to array for RichTextEditor value (use this function only for html string created by convertToHtmlString function) |
209+
| getDefaultStyles | - | javascript object | creates required styles for the editor. |
173210

174211
## Expo Demo App
175212
Checkout the
@@ -179,3 +216,6 @@ If you are looking to test and run expo-demo App locally, click
179216
[here](https://github.com/imnapo/react-native-cn-richtext-editor/tree/master/expo-demo) to
180217
view the implementation & run it locally.
181218

219+
## License
220+
ISC
221+

0 commit comments

Comments
 (0)