npm
/
react-native-zss-rich-text-editor
Watch 10
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 3 Wiki Activity
Browse Source

Initial toolbar

Yedidya Kennard 8 years ago
parent
b39bfc4d1a
commit
8e73253a97
4 changed files with 33 additions and 5 deletions
Split View Show Diff Stats
  1. 6
    1
      example/app.js
  2. 2
    1
      example/package.json
  3. 22
    0
      src/RichTextToolbar.js
  4. 3
    3
      src/editor.html

+ 6
- 1
example/app.js View File 

@@ -4,7 +4,8 @@ import {
4 4 
     Text,
5 5 
     View
6 6 
 } from 'react-native';
7 
-import RichTextEditor from 'react-native-ZSSRichTextEditor'
7 
+import {RichTextEditor, RichTextToolbar} from 'react-native-ZSSRichTextEditor'
8 
+import KeyboardSpacer from 'react-native-keyboard-spacer';
8 9
9 10 
 export default class RichTextExample extends Component {
10 11 
 
@@ -21,6 +22,10 @@ export default class RichTextExample extends Component {
21 22 
               style={styles.richText}
22 23 
               initialHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
23 24 
           />
25 
+          <RichTextToolbar
26 
+            getEditor={() => this.richtext}
27 
+          />
28 
+          <KeyboardSpacer/>
24 29 
         </View>
25 30 
     );
26 31 
   }

+ 2
- 1
example/package.json View File 

@@ -8,6 +8,7 @@
8 8 
   "dependencies": {
9 9 
     "react": "15.2.1",
10 10 
     "react-native": "0.31.0",
11 
-    "react-native-ZSSRichTextEditor": "file:../"
11 
+    "react-native-ZSSRichTextEditor": "file:../",
12 
+    "react-native-keyboard-spacer": "^0.3.0"
12 13 
   }
13 14 
 }

+ 22
- 0
src/RichTextToolbar.js View File 

@@ -0,0 +1,22 @@
1 
+import React, {Component, PropTypes} from 'react';
2 
+import {View, TouchableOpacity} from 'react-native';
3 
+
4 
+
5 
+export default class RichTextToolbar extends Component {
6 
+
7 
+  static propTypes = {
8 
+    getEditor: PropTypes.func.isRequired
9 
+  };
10 
+
11 
+  render() {
12 
+    return (
13 
+      <TouchableOpacity
14 
+        style={{
15 
+          height: 50,
16 
+          backgroundColor: 'red'
17 
+        }}
18 
+        onPress={() => this.props.getEditor().setBold()}
19 
+      />
20 
+    );
21 
+  }
22 
+}

+ 3
- 3
src/editor.html View File 

@@ -15,8 +15,8 @@
15 15
16 16 
 	<body onLoad="zss_editor.init();">
17 17 
 		<!-- ZSSRichTextEditor Editable Content -->
18 
-		<div id="zss_editor_content" class="zs_editor_content" contenteditable="true" placeholder=""></div>
19 
-		<!-- Footer -->
20 
-		<div id="zss_editor_footer"></div>
18 
+		<div id="zss_editor_title" class="zs_editor_content" contenteditable="true" placeholder="title"></div>
19 
+		<div><hr></div>
20 
+		<div id="zss_editor_content" class="zs_editor_content" contenteditable="true" placeholder="content"></div>
21 21 
 	</body>
22 22 
 </html>