|
|
|
|
1
|
-#React Native Rich Text Editor
|
|
|
|
|
1
|
+# React Native Rich Text Editor
|
2
|
|
2
|
|
3
|
A fully functional Rich Text Editor for both Android and iOS, based off the [ZSSRichTextEditor](https://github.com/nnhubbard/ZSSRichTextEditor/tree/master/ZSSRichTextEditor) project.
|
3
|
A fully functional Rich Text Editor for both Android and iOS, based off the [ZSSRichTextEditor](https://github.com/nnhubbard/ZSSRichTextEditor/tree/master/ZSSRichTextEditor) project.
|
4
|
|
4
|
|
5
|
-##Installation
|
|
|
|
|
5
|
+## Installation
|
6
|
|
6
|
|
7
|
-`npm i --save react-native-zss-rich-text-editor`
|
|
|
|
|
7
|
+```
|
|
|
8
|
+npm i --save react-native-zss-rich-text-editor
|
|
|
9
|
+```
|
8
|
|
10
|
|
9
|
On Android, add the following to the end of your `android/app/build.gradle`
|
11
|
On Android, add the following to the end of your `android/app/build.gradle`
|
10
|
|
12
|
|
|
|
|
|
18
|
Also, follow instructions [here](https://github.com/alinz/react-native-webview-bridge) to add the native `react-native-webview-bridge-updated` dependency.
|
20
|
Also, follow instructions [here](https://github.com/alinz/react-native-webview-bridge) to add the native `react-native-webview-bridge-updated` dependency.
|
19
|
|
21
|
|
20
|
|
22
|
|
21
|
-##Usage
|
|
|
|
|
23
|
+## Usage
|
22
|
|
24
|
|
23
|
`react-native-zss-rich-text-editor` exports two Components and one const dictionary:
|
25
|
`react-native-zss-rich-text-editor` exports two Components and one const dictionary:
|
24
|
|
26
|
|
25
|
-##`RichTextEditor`
|
|
|
|
|
27
|
+## `RichTextEditor`
|
26
|
|
28
|
|
27
|
The editor component. Simply place this component in your view hierarchy to receive a fully functional Rich text Editor.
|
29
|
The editor component. Simply place this component in your view hierarchy to receive a fully functional Rich text Editor.
|
28
|
|
30
|
|
|
|
|
|
119
|
|
121
|
|
120
|
* `registerToolbar(listener)`
|
122
|
* `registerToolbar(listener)`
|
121
|
|
123
|
|
122
|
-###Example Usage:
|
|
|
|
|
124
|
+### Example Usage:
|
123
|
|
125
|
|
124
|
```javascript
|
126
|
```javascript
|
125
|
<RichTextEditor
|
127
|
<RichTextEditor
|
|
|
|
|
132
|
|
134
|
|
133
|
![RichTextEditor](readme/editor.png)
|
135
|
![RichTextEditor](readme/editor.png)
|
134
|
|
136
|
|
135
|
-##`RichTextToolbar`
|
|
|
|
|
137
|
+## `RichTextToolbar`
|
136
|
|
138
|
|
137
|
This is a Component that provides a toolbar for easily controlling an editor. It is designed to be used together with a `RichTextEditor` component.
|
139
|
This is a Component that provides a toolbar for easily controlling an editor. It is designed to be used together with a `RichTextEditor` component.
|
138
|
|
140
|
|
|
|
|
|
178
|
`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.
|
180
|
`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.
|
179
|
|
181
|
|
180
|
|
182
|
|
181
|
-###Example Usage:
|
|
|
|
|
183
|
+### Example Usage:
|
182
|
|
184
|
|
183
|
```javascript
|
185
|
```javascript
|
184
|
<RichTextToolbar
|
186
|
<RichTextToolbar
|
|
|
|
|
191
|
![RichTextEditor](readme/toolbar_selected.png)
|
193
|
![RichTextEditor](readme/toolbar_selected.png)
|
192
|
|
194
|
|
193
|
|
195
|
|
194
|
-##`actions`
|
|
|
|
|
196
|
+## `actions`
|
195
|
|
197
|
|
196
|
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.
|
198
|
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.
|
197
|
|
199
|
|
|
|
|
|
245
|
}
|
247
|
}
|
246
|
|
248
|
|
247
|
|
249
|
|
248
|
-##Attribution
|
|
|
|
|
250
|
+## Attribution
|
249
|
|
251
|
|
250
|
-`react-native-zss-rich-text-editor` is a wrapper around the amazing [ZSSRichTextEditor](https://github.com/nnhubbard/ZSSRichTextEditor/tree/master/ZSSRichTextEditor) project. It also communicates with the editor using (a tiny fork) of the awesome [react-native-webview-bridge](https://github.com/alinz/react-native-webview-bridge) project.
|
|
|
|
|
252
|
+`react-native-zss-rich-text-editor` is a wrapper around the amazing [ZSSRichTextEditor](https://github.com/nnhubbard/ZSSRichTextEditor/tree/master/ZSSRichTextEditor) project. It also communicates with the editor using (a tiny fork) of the awesome [react-native-webview-bridge](https://github.com/alinz/react-native-webview-bridge) project.
|