|
@@ -1,10 +1,12 @@
|
1
|
|
-#React Native Rich Text Editor
|
|
1
|
+# React Native Rich Text Editor
|
2
|
2
|
|
3
|
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
|
11
|
On Android, add the following to the end of your `android/app/build.gradle`
|
10
|
12
|
|
|
@@ -18,11 +20,11 @@ project.afterEvaluate {
|
18
|
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
|
25
|
`react-native-zss-rich-text-editor` exports two Components and one const dictionary:
|
24
|
26
|
|
25
|
|
-##`RichTextEditor`
|
|
27
|
+## `RichTextEditor`
|
26
|
28
|
|
27
|
29
|
The editor component. Simply place this component in your view hierarchy to receive a fully functional Rich text Editor.
|
28
|
30
|
|
|
@@ -119,7 +121,7 @@ This method registers a function that will get called whenver the cursor positio
|
119
|
121
|
|
120
|
122
|
* `registerToolbar(listener)`
|
121
|
123
|
|
122
|
|
-###Example Usage:
|
|
124
|
+### Example Usage:
|
123
|
125
|
|
124
|
126
|
```javascript
|
125
|
127
|
<RichTextEditor
|
|
@@ -132,7 +134,7 @@ This method registers a function that will get called whenver the cursor positio
|
132
|
134
|
|
133
|
135
|
![RichTextEditor](readme/editor.png)
|
134
|
136
|
|
135
|
|
-##`RichTextToolbar`
|
|
137
|
+## `RichTextToolbar`
|
136
|
138
|
|
137
|
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,7 +180,7 @@ Other props supported by the `RichTextToolbar` component are:
|
178
|
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
|
185
|
```javascript
|
184
|
186
|
<RichTextToolbar
|
|
@@ -191,7 +193,7 @@ Other props supported by the `RichTextToolbar` component are:
|
191
|
193
|
![RichTextEditor](readme/toolbar_selected.png)
|
192
|
194
|
|
193
|
195
|
|
194
|
|
-##`actions`
|
|
196
|
+## `actions`
|
195
|
197
|
|
196
|
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,6 +247,6 @@ This is a set of consts of all supported actions. These will be passed in arrays
|
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.
|