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
Unified 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 
     Text,
 4 
     Text,
5 
     View
 5 
     View
6 
 } from 'react-native';
 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 
 export default class RichTextExample extends Component {
 10 
 export default class RichTextExample extends Component {
10
11
21 
               style={styles.richText}
 22 
               style={styles.richText}
22 
               initialHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
 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 
         </View>
 29 
         </View>
25 
     );
 30 
     );
26 
   }
 31 
   }

+ 2
- 1
example/package.json View File

8 
   "dependencies": {
 8 
   "dependencies": {
9 
     "react": "15.2.1",
 9 
     "react": "15.2.1",
10 
     "react-native": "0.31.0",
 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

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
15
16 
 	<body onLoad="zss_editor.init();">
 16 
 	<body onLoad="zss_editor.init();">
17 
 		<!-- ZSSRichTextEditor Editable Content -->
 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 
 	</body>
 21 
 	</body>
22 
 </html>
 22 
 </html>