Yedidya Kennard 8 years ago
parent
commit
72b69ea93d
4 changed files with 65 additions and 3 deletions
  1. 18
    0
      example/index.ios.js
  2. 34
    2
      src/RichTextEditor.js
  3. 8
    0
      src/WebviewMessageHandler.js
  4. 5
    1
      src/const.js

+ 18
- 0
example/index.ios.js View File

9
 
9
 
10
 class RichTextExample extends Component {
10
 class RichTextExample extends Component {
11
 
11
 
12
+  constructor(props) {
13
+    super(props);
14
+    this.getHTML = this.getHTML.bind(this);
15
+  }
16
+
12
   render() {
17
   render() {
13
     return (
18
     return (
14
       <View style={styles.container}>
19
       <View style={styles.container}>
15
         <RichTextEditor
20
         <RichTextEditor
21
+          ref={(r)=>this.richtext = r}
16
           style={styles.richText}
22
           style={styles.richText}
17
           initialHTML={'Hello <b>World</b> <p>this is a new paragraph</p>'}
23
           initialHTML={'Hello <b>World</b> <p>this is a new paragraph</p>'}
18
         />
24
         />
19
       </View>
25
       </View>
20
     );
26
     );
21
   }
27
   }
28
+
29
+  async getHTML() {
30
+    const html = await this.richtext.getHtml();
31
+    alert(html);
32
+  }
33
+
34
+  componentDidMount() {
35
+
36
+    setTimeout(()=>{
37
+      this.getHTML();
38
+    }, 3000);
39
+  }
22
 }
40
 }
23
 
41
 
24
 const styles = StyleSheet.create({
42
 const styles = StyleSheet.create({

+ 34
- 2
src/RichTextEditor.js View File

2
 import WebViewBridge from 'react-native-webview-bridge-updated';
2
 import WebViewBridge from 'react-native-webview-bridge-updated';
3
 import {InjectedMessageHandler} from './WebviewMessageHandler';
3
 import {InjectedMessageHandler} from './WebviewMessageHandler';
4
 import {actions} from './const';
4
 import {actions} from './const';
5
+import * as consts from './const';
5
 
6
 
6
 const injectScript = `
7
 const injectScript = `
7
   (function () {
8
   (function () {
26
   }
27
   }
27
 
28
 
28
   onBridgeMessage(message){
29
   onBridgeMessage(message){
29
-    console.log('RichTextEditor', 'bridge message: ', message);
30
+    // handle other callbacks
31
+    const json = JSON.parse(message);
32
+    if (json && json.type && json.type === consts.HTML_RESPONSE) {
33
+      if (this.resolve) {
34
+        this.resolve(json.data);
35
+        this.resolve = undefined;
36
+        this.reject = undefined;
37
+        if (this.pendingHtml) {
38
+          clearTimeout(this.pendingHtml);
39
+          this.pendingHtml = undefined;
40
+        }
41
+      }
42
+    }
30
   }
43
   }
31
 
44
 
32
   onShouldStartLoadRequest(event) {
45
   onShouldStartLoadRequest(event) {
54
 
67
 
55
   //-------------------------------------------------------------------------------
68
   //-------------------------------------------------------------------------------
56
   //--------------- Public API
69
   //--------------- Public API
57
-  
70
+
58
   setHTML(html) {
71
   setHTML(html) {
59
     this._sendAction(actions.setHtml, html);
72
     this._sendAction(actions.setHtml, html);
60
   }
73
   }
154
   setOutdent() {
167
   setOutdent() {
155
     this._sendAction(actions.setOutdent);
168
     this._sendAction(actions.setOutdent);
156
   }
169
   }
170
+
171
+  setPlaceholder() {
172
+    this._sendAction(actions.setPlaceholder);
173
+  }
174
+
175
+  async getHtml() {
176
+    return new Promise((resolve, reject) => {
177
+      this.resolve = resolve;
178
+      this.reject = reject;
179
+      this._sendAction(actions.getHtml);
180
+
181
+      this.pendingHtml = setTimeout(() => {
182
+        if (this.reject) {
183
+          this.reject('timeout')
184
+        }
185
+      }, 5000);
186
+    });
187
+  }
188
+
157
 }
189
 }

+ 8
- 0
src/WebviewMessageHandler.js View File

1
 import {actions} from './const';
1
 import {actions} from './const';
2
+import * as consts from './const';
2
 
3
 
3
 export const InjectedMessageHandler = `
4
 export const InjectedMessageHandler = `
4
   if (WebViewBridge) {
5
   if (WebViewBridge) {
80
         case '${actions.setOutdent}':
81
         case '${actions.setOutdent}':
81
           zss_editor.setOutdent();
82
           zss_editor.setOutdent();
82
           break;
83
           break;
84
+        case '${actions.setPlaceholder}':
85
+          zss_editor.setPlaceholder();
86
+          break;
87
+        case '${actions.getHtml}':
88
+          const html = zss_editor.getHTML();
89
+          WebViewBridge.send(JSON.stringify({type: '${consts.HTML_RESPONSE}', data: html}));
90
+          break;
83
       }
91
       }
84
     };
92
     };
85
   }
93
   }

+ 5
- 1
src/const.js View File

1
 export const actions = {
1
 export const actions = {
2
   setHtml: 'SET_HTML',
2
   setHtml: 'SET_HTML',
3
+  getHtml: 'GET_HTML',
3
   blurEditor: 'BLUR_EDITOR',
4
   blurEditor: 'BLUR_EDITOR',
4
   setBold: 'SET_BOLD',
5
   setBold: 'SET_BOLD',
5
   setItalic: 'SET_ITALIC',
6
   setItalic: 'SET_ITALIC',
23
   setStrikethrough: 'SET_STRIKETHRU',
24
   setStrikethrough: 'SET_STRIKETHRU',
24
   setHR: 'SET_HR',
25
   setHR: 'SET_HR',
25
   setIndent: 'SET_INDENT',
26
   setIndent: 'SET_INDENT',
26
-  setOutdent: 'SET_OUTDENT'
27
+  setOutdent: 'SET_OUTDENT',
28
+  setPlaceholder: 'SET_PLACEHOLDER'
27
 };
29
 };
30
+
31
+export const HTML_RESPONSE = 'HTML_RESPONSE';