升级webview

package.json

@@ -8,9 +8,6 @@
   "description": "React Native Wrapper for ZSSRichTextEditor",
   "main": "index.js",
   "license": "SEE LICENSE IN LICENSE",
-  "dependencies": {
-    "react-native-webview-bridge-updated": "^1.0.0"
-  },
   "peerDependencies": {
     "react": "*",
     "react-native": ">=0.31.0"

src/RichTextEditor.js

@@ -1,15 +1,16 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import WebViewBridge from 'react-native-webview-bridge-updated';
-import {InjectedMessageHandler} from './WebviewMessageHandler';
+// import WebViewBridge from 'react-native-webview-bridge-updated';
+import WebView from 'react-native-webview';
+import {MessageConverter} from './WebviewMessageHandler';
 import {actions, messages} from './const';
 import {Modal, View, Text, StyleSheet, TextInput, TouchableOpacity, Platform, PixelRatio, Keyboard, Dimensions} from 'react-native';
 
-const injectScript = `
-  (function () {
-    ${InjectedMessageHandler}
-  }());
-`;
+// const injectScript = `
+//   (function () {
+//     ${InjectedMessageHandler}
+//   }());
+// `;
 
 const PlatformIOS = Platform.OS === 'ios';
 
@@ -36,7 +37,7 @@ export default class RichTextEditor extends Component {
     super(props);
     this._sendAction = this._sendAction.bind(this);
     this.registerToolbar = this.registerToolbar.bind(this);
-    this.onBridgeMessage = this.onBridgeMessage.bind(this);
+    this.onMessage = this.onMessage.bind(this);
     this._onKeyboardWillShow = this._onKeyboardWillShow.bind(this);
     this._onKeyboardWillHide = this._onKeyboardWillHide.bind(this);
     this.state = {
@@ -51,7 +52,7 @@ export default class RichTextEditor extends Component {
     this._selectedTextChangeListeners = [];
   }
 
-  componentWillMount() {
+  componentDidMount() {
     if(PlatformIOS) {
       this.keyboardEventListeners = [
         Keyboard.addListener('keyboardWillShow', this._onKeyboardWillShow),
@@ -94,7 +95,8 @@ export default class RichTextEditor extends Component {
     this.setEditorHeight(editorAvailableHeight);
   }
 
-  onBridgeMessage(str){
+  onMessage({ nativeEvent }){
+    const { data: str } = nativeEvent;
     try {
       const message = JSON.parse(str);
 
@@ -149,8 +151,8 @@ export default class RichTextEditor extends Component {
           }
           this.setTitlePlaceholder(this.props.titlePlaceholder);
           this.setContentPlaceholder(this.props.contentPlaceholder);
-          this.setTitleHTML(this.props.initialTitleHTML);
-          this.setContentHTML(this.props.initialContentHTML);
+          this.setTitleHTML(this.props.initialTitleHTML || '');
+          this.setContentHTML(this.props.initialContentHTML || '');
 
           this.props.hiddenTitle && this.hideTitle();
           this.props.enableOnChange && this.enableOnChange();
@@ -167,7 +169,7 @@ export default class RichTextEditor extends Component {
           console.log('FROM ZSS', message.data);
           break;
         case messages.SCROLL:
-          this.webviewBridge.setNativeProps({contentOffset: {y: message.data}});
+          this.webview.setNativeProps({contentOffset: {y: message.data}});
           break;
         case messages.TITLE_FOCUSED:
           this.titleFocusHandler && this.titleFocusHandler();
@@ -294,13 +296,13 @@ export default class RichTextEditor extends Component {
     const pageSource = PlatformIOS ? require('./editor.html') : { uri: 'file:///android_asset/editor.html' };
     return (
       <View style={{flex: 1}}>
-        <WebViewBridge
+        <WebView
           {...this.props}
           hideKeyboardAccessoryView={true}
           keyboardDisplayRequiresUserAction={false}
-          ref={(r) => {this.webviewBridge = r}}
-          onBridgeMessage={(message) => this.onBridgeMessage(message)}
-          injectedJavaScript={injectScript}
+          ref={(r) => {this.webview = r}}
+          onMessage={(message) => this.onMessage(message)}
+          // injectedJavaScript={injectScript}
           source={pageSource}
           onLoad={() => this.init()}
         />
@@ -323,9 +325,8 @@ export default class RichTextEditor extends Component {
   };
 
   _sendAction(action, data) {
-    let jsonString = JSON.stringify({type: action, data});
-    jsonString = this.escapeJSONString(jsonString);
-    this.webviewBridge.sendToBridge(jsonString);
+    let jsToBeExecutedOnPage = MessageConverter({ type: action, data });
+    this.webview.injectJavaScript(jsToBeExecutedOnPage + ';true;');
   }
 
   //-------------------------------------------------------------------------------
@@ -654,4 +655,4 @@ const styles = StyleSheet.create({
     marginRight: -20,
     marginTop: 20
   }
-});
+});

src/WebviewMessageHandler.js

@@ -1,176 +1,118 @@
 import {actions, messages} from './const';
 
-export const InjectedMessageHandler = `
-  if (WebViewBridge) {
-    WebViewBridge.onMessage = function (message) {
-
-      const action = JSON.parse(message);
-
-      switch(action.type) {
-        case '${actions.enableOnChange}':
-          zss_editor.enableOnChange();
-          break;
-        case '${actions.setTitleHtml}':
-          zss_editor.setTitleHTML(action.data);
-          break;
-        case '${actions.toggleTitle}':
-          zss_editor.toggleTitle(action.data);
-          break;
-        case '${actions.hideTitle}':
-          zss_editor.hideTitle(action.data);
-          break;
-        case '${actions.showTitle}':
-          zss_editor.showTitle(action.data);
-          break;
-        case '${actions.setContentHtml}':
-          zss_editor.setContentHTML(action.data);
-          break;
-        case '${actions.blurTitleEditor}':
-          zss_editor.blurTitleEditor();
-          break;
-        case '${actions.blurContentEditor}':
-          zss_editor.blurContentEditor();
-          break;
-        case '${actions.setBold}':
-          zss_editor.setBold();
-          break;
-        case '${actions.setItalic}':
-          zss_editor.setItalic();
-          break;
-        case '${actions.setUnderline}':
-          zss_editor.setUnderline();
-          break;
-        case '${actions.heading1}':
-          zss_editor.setHeading('h1');
-          break;
-        case '${actions.heading2}':
-          zss_editor.setHeading('h2');
-          break;
-        case '${actions.heading3}':
-          zss_editor.setHeading('h3');
-          break;
-        case '${actions.heading4}':
-          zss_editor.setHeading('h4');
-          break;
-        case '${actions.heading5}':
-          zss_editor.setHeading('h5');
-          break;
-        case '${actions.heading6}':
-          zss_editor.setHeading('h6');
-          break;
-        case '${actions.setParagraph}':
-          zss_editor.setParagraph();
-          break;
-        case '${actions.removeFormat}':
-          zss_editor.removeFormating();
-          break;
-        case '${actions.alignLeft}':
-          zss_editor.setJustifyLeft();
-          break;
-        case '${actions.alignCenter}':
-          zss_editor.setJustifyCenter();
-          break;
-        case '${actions.alignRight}':
-          zss_editor.setJustifyRight();
-          break;
-        case '${actions.alignFull}':
-          zss_editor.setJustifyFull();
-          break;
-        case '${actions.insertBulletsList}':
-          zss_editor.setUnorderedList();
-          break;
-        case '${actions.insertOrderedList}':
-          zss_editor.setOrderedList();
-          break;
-        case '${actions.insertLink}':
-          zss_editor.insertLink(action.data.url, action.data.title);
-          break;
-        case '${actions.updateLink}':
-          zss_editor.updateLink(action.data.url, action.data.title);
-          break;
-        case '${actions.insertImage}':
-          zss_editor.insertImage(action.data);
-          break;
-        case '${actions.setSubscript}':
-          zss_editor.setSubscript();
-          break;
-        case '${actions.setSuperscript}':
-          zss_editor.setSuperscript();
-          break;
-        case '${actions.setStrikethrough}':
-          zss_editor.setStrikeThrough();
-          break;
-        case '${actions.setHR}':
-          zss_editor.setHorizontalRule();
-          break;
-        case '${actions.setIndent}':
-          zss_editor.setIndent();
-          break;
-        case '${actions.setOutdent}':
-          zss_editor.setOutdent();
-          break;
-        case '${actions.setTitlePlaceholder}':
-          zss_editor.setTitlePlaceholder(action.data);
-          break;
-        case '${actions.setContentPlaceholder}':
-          zss_editor.setContentPlaceholder(action.data);
-          break;
-        case '${actions.getTitleHtml}':
-          var html = zss_editor.getTitleHTML();
-          WebViewBridge.send(JSON.stringify({type: '${messages.TITLE_HTML_RESPONSE}', data: html}));
-          break;
-        case '${actions.getTitleText}':
-          var html = zss_editor.getTitleText();
-          WebViewBridge.send(JSON.stringify({type: '${messages.TITLE_TEXT_RESPONSE}', data: html}));
-          break;
-        case '${actions.getContentHtml}':
-          var html = zss_editor.getContentHTML();
-          WebViewBridge.send(JSON.stringify({type: '${messages.CONTENT_HTML_RESPONSE}', data: html}));
-          break;
-        case '${actions.setTitleFocusHandler}':
-          zss_editor.setTitleFocusHandler();
-          break;
-        case '${actions.setContentFocusHandler}':
-          zss_editor.setContentFocusHandler();
-          break;
-        case '${actions.getSelectedText}':
-          var selectedText = getSelection().toString();
-          WebViewBridge.send(JSON.stringify({type: '${messages.SELECTED_TEXT_RESPONSE}', data: selectedText}));
-          break;
-        case '${actions.focusContent}':
-          zss_editor.focusContent();
-          break;
-        case '${actions.focusTitle}':
-          zss_editor.focusTitle();
-          break;
-        case '${actions.prepareInsert}':
-          zss_editor.prepareInsert();
-          break;
-        case '${actions.restoreSelection}':
-          zss_editor.restorerange();
-          break;
-        case '${actions.setCustomCSS}':
-          zss_editor.setCustomCSS(action.data);
-          break;
-        case '${actions.setTextColor}':
-          zss_editor.setTextColor(action.data);
-          break;
-        case '${actions.setBackgroundColor}':
-          zss_editor.setBackgroundColor(action.data);
-          break;
-        case '${actions.init}':
-          zss_editor.init();
-          break;
-        case '${actions.setEditorHeight}':
-          zss_editor.setEditorHeight(action.data);
-          break;
-        case '${actions.setFooterHeight}':
-          zss_editor.setFooterHeight(action.data);
-          break;
-        case '${actions.setPlatform}':
-          zss_editor.setPlatform(action.data);
-          break;
-      }
-    };
+export const MessageConverter = (action) => {
+  switch(action.type) {
+    case `${actions.init}`:
+      return 'zss_editor.init();';
+    case `${actions.setPlatform}`:
+      return `zss_editor.setPlatform('${action.data}');`;
+    case `${actions.enableOnChange}`:
+      return 'zss_editor.enableOnChange()';
+    case `${actions.setTitleHtml}`:
+      return `zss_editor.setTitleHTML('${action.data}');`;
+    case `${actions.toggleTitle}`:
+      return `zss_editor.toggleTitle('${action.data}');`;
+    case `${actions.hideTitle}`:
+      return `zss_editor.hideTitle('${action.data}');`;
+    case `${actions.showTitle}`:
+      return `zss_editor.showTitle('${action.data}');`;
+    case `${actions.setContentHtml}`:
+      return `zss_editor.setContentHTML('${action.data}');`;
+    case `${actions.blurTitleEditor}`:
+      return `zss_editor.blurTitleEditor();`;
+    case `${actions.blurContentEditor}`:
+      return `zss_editor.blurContentEditor();`;
+    case `${actions.setBold}`:
+      return `zss_editor.setBold();`;
+    case `${actions.setItalic}`:
+      return `zss_editor.setItalic();`;
+    case `${actions.setUnderline}`:
+      return `zss_editor.setUnderline();`;
+    case `${actions.heading1}`:
+      return `zss_editor.setHeading('h1');`;
+    case `${actions.heading2}`:
+      return `zss_editor.setHeading('h2');`;
+    case `${actions.heading3}`:
+      return `zss_editor.setHeading('h3');`;
+    case `${actions.heading4}`:
+      return `zss_editor.setHeading('h4');`;
+    case `${actions.heading5}`:
+      return `zss_editor.setHeading('h5');`;
+    case `${actions.heading6}`:
+      return `zss_editor.setHeading('h6');`;
+    case `${actions.setParagraph}`:
+      return `zss_editor.setParagraph();`;
+    case `${actions.removeFormat}`:
+      return `zss_editor.removeFormating();`;
+    case `${actions.alignLeft}`:
+      return `zss_editor.setJustifyLeft();`;
+    case `${actions.alignCenter}`:
+      return `zss_editor.setJustifyCenter();`;
+    case `${actions.alignRight}`:
+      return `zss_editor.setJustifyRight();`;
+    case `${actions.alignFull}`:
+      return `zss_editor.setJustifyFull();`;
+    case `${actions.insertBulletsList}`:
+      return `zss_editor.setUnorderedList();`;
+    case `${actions.insertOrderedList}`:
+      return `zss_editor.setOrderedList();`;
+    case `${actions.insertLink}`:
+      return `zss_editor.insertLink('${action.data.url}, ${action.data.title}');`;
+    case `${actions.updateLink}`:
+      return `zss_editor.updateLink('${action.data.url}, ${action.data.title}');`;
+    case `${actions.insertImage}`:
+      return `zss_editor.insertImage('${action.data}');`;
+    case `${actions.setSubscript}`:
+      return `zss_editor.setSubscript();`;
+    case `${actions.setSuperscript}`:
+      return `zss_editor.setSuperscript();`;
+    case `${actions.setStrikethrough}`:
+      return `zss_editor.setStrikeThrough();`;
+    case `${actions.setHR}`:
+      return `zss_editor.setHorizontalRule();`;
+    case `${actions.setIndent}`:
+      return `zss_editor.setIndent();`;
+    case `${actions.setOutdent}`:
+      return `zss_editor.setOutdent();`;
+    case `${actions.setTitlePlaceholder}`:
+      return `zss_editor.setTitlePlaceholder('${action.data}');`;
+    case `${actions.setContentPlaceholder}`:
+      return `zss_editor.setContentPlaceholder('${action.data}');`;
+    case `${actions.focusContent}`:
+      return `zss_editor.focusContent();`;
+    case `${actions.focusTitle}`:
+      return `zss_editor.focusTitle();`;
+    case `${actions.prepareInsert}`:
+      return `zss_editor.prepareInsert();`;
+    case `${actions.restoreSelection}`:
+      return `zss_editor.restorerange();`;
+    case `${actions.setCustomCSS}`:
+      return `zss_editor.setCustomCSS('${action.data}');`;
+    case `${actions.setTextColor}`:
+      return `zss_editor.setTextColor('${action.data}');`;
+    case `${actions.setFontSize}`:
+      return `zss_editor.setFontSize('${action.data}');`;
+    case `${actions.setBackgroundColor}`:
+      return `zss_editor.setBackgroundColor('${action.data}');`;
+    case `${actions.setEditorHeight}`:
+      return `zss_editor.setEditorHeight('${action.data}');`;
+    case `${actions.setFooterHeight}`:
+      return `zss_editor.setFooterHeight('${action.data}');`;
+    case `${actions.setTitleFocusHandler}`:
+      return `zss_editor.setTitleFocusHandler();`;
+    case `${actions.setContentFocusHandler}`:
+      return `zss_editor.setContentFocusHandler();`;
+    case `${actions.getTitleHtml}`:
+      return `var html = zss_editor.getTitleHTML();
+      ReactNativeWebView.postMessage(JSON.stringify({type: '${messages.TITLE_HTML_RESPONSE}', data: html}));`
+    case `${actions.getTitleText}`:
+      return `var html = zss_editor.getTitleText();
+      ReactNativeWebView.postMessage(JSON.stringify({type: '${messages.TITLE_TEXT_RESPONSE}', data: html}));`
+    case `${actions.getContentHtml}`:
+      return `var html = zss_editor.getContentHTML();
+      ReactNativeWebView.postMessage(JSON.stringify({type: '${messages.CONTENT_HTML_RESPONSE}', data: html}));`
+    case `${actions.getSelectedText}`:
+      return `var selectedText = getSelection().toString();
+      ReactNativeWebView.postMessage(JSON.stringify({type: '${messages.SELECTED_TEXT_RESPONSE}', data: selectedText}));`
   }
-`;
+};

src/editor.html

@@ -853,7 +853,7 @@
 						title: anchor.text(),
 						url: anchor.attr('href')
 					};
-					WebViewBridge.send(JSON.stringify({type: 'LINK_TOUCHED', data: link}))
+					ReactNativeWebView.postMessage(JSON.stringify({type: 'LINK_TOUCHED', data: link}))
 				});
 			}
 
@@ -920,7 +920,7 @@
 				// zss_editor.focusTitle();
 
 				setTimeout(function() {
-					WebViewBridge.send(JSON.stringify({type: 'ZSS_INITIALIZED'}))
+					ReactNativeWebView.postMessage(JSON.stringify({type: 'ZSS_INITIALIZED'}))
 				}, 20);
 
 			}//end
@@ -932,7 +932,7 @@
 				});
 
 				if (selectedTextChangeMessage !== zss_editor.previousSelectedTextChangeMessage) {
-					WebViewBridge.send(selectedTextChangeMessage);
+					ReactNativeWebView.postMessage(selectedTextChangeMessage);
 					zss_editor.previousSelectedTextChangeMessage = selectedTextChangeMessage;
 				}
 			}
@@ -987,13 +987,13 @@
 
 			// This will show up in the XCode console as we are able to push this into an NSLog.
 			zss_editor.debug = function(msg) {
-				WebViewBridge.send(JSON.stringify({type: 'LOG', data: msg}));
+				ReactNativeWebView.postMessage(JSON.stringify({type: 'LOG', data: msg}));
 			}
 
 
 			zss_editor.setScrollPosition = function() {
 				var position = window.pageYOffset;
-				WebViewBridge.send(JSON.stringify({type: 'SCROLL', data: position}));
+				ReactNativeWebView.postMessage(JSON.stringify({type: 'SCROLL', data: position}));
 			}
 
 			function setPlaceholder(editorId, placeholder) {
@@ -1378,7 +1378,7 @@
 
 			zss_editor.enableOnChange = function() {
 				$('#zss_editor_content').on('input', function(){
-					WebViewBridge.send(JSON.stringify({
+					ReactNativeWebView.postMessage(JSON.stringify({
 						type: 'CONTENT_CHANGE',
 						data: {content: getHtml("zss_editor_content")}
 					}))
@@ -1566,7 +1566,7 @@
 				});
 
 				if (selectionChangeMessage !== zss_editor.previousSelectionChangeMessage) {
-					WebViewBridge.send(selectionChangeMessage);
+					ReactNativeWebView.postMessage(selectionChangeMessage);
 					zss_editor.previousSelectionChangeMessage = selectionChangeMessage;
 				}
 			}
@@ -1625,13 +1625,13 @@
 
 			zss_editor.setTitleFocusHandler = function() {
 				addFocusEvent('zss_editor_title', function() {
-					WebViewBridge.send(JSON.stringify({type: 'TITLE_FOCUSED'}))
+					ReactNativeWebView.postMessage(JSON.stringify({type: 'TITLE_FOCUSED'}))
 				});
 			}
 
 			zss_editor.setContentFocusHandler = function() {
 				addFocusEvent('zss_editor_content', function() {
-					WebViewBridge.send(JSON.stringify({type: 'CONTENT_FOCUSED'}))
+					ReactNativeWebView.postMessage(JSON.stringify({type: 'CONTENT_FOCUSED'}))
 				});
 			}