zhangchao 4 years ago
parent
commit
1c9edb54bd
4 changed files with 26 additions and 2 deletions
  1. 8
    1
      src/RichTextEditor.js
  2. 2
    0
      src/WebviewMessageHandler.js
  3. 2
    0
      src/const.js
  4. 14
    1
      src/editor.html

+ 8
- 1
src/RichTextEditor.js View File

145
           this.setContentPlaceholder(this.props.contentPlaceholder);
145
           this.setContentPlaceholder(this.props.contentPlaceholder);
146
           this.setTitleHTML(this.props.initialTitleHTML || '');
146
           this.setTitleHTML(this.props.initialTitleHTML || '');
147
           this.setContentHTML(this.props.initialContentHTML || '');
147
           this.setContentHTML(this.props.initialContentHTML || '');
148
-
149
           !this.props.hiddenTitle && this.showTitle();
148
           !this.props.hiddenTitle && this.showTitle();
150
           this.props.enableOnChange && this.enableOnChange();
149
           this.props.enableOnChange && this.enableOnChange();
151
 
150
 
168
         case messages.CONTENT_FOCUSED:
167
         case messages.CONTENT_FOCUSED:
169
           this.contentFocusHandler && this.contentFocusHandler();
168
           this.contentFocusHandler && this.contentFocusHandler();
170
           break;
169
           break;
170
+        case messages.CONTENT_BLUR:
171
+          this.contentBlurHandler && this.contentBlurHandler();
172
+          break;
171
         case messages.SELECTION_CHANGE: {
173
         case messages.SELECTION_CHANGE: {
172
           const items = message.data.items;
174
           const items = message.data.items;
173
           this.state.selectionChangeListeners.map((listener) => {
175
           this.state.selectionChangeListeners.map((listener) => {
588
     this._sendAction(actions.setContentFocusHandler);
590
     this._sendAction(actions.setContentFocusHandler);
589
   }
591
   }
590
 
592
 
593
+  setContentBlurHandler(callbackHandler) {
594
+    this.contentBlurHandler = callbackHandler;
595
+    this._sendAction(actions.setContentBlurHandler);
596
+  }
597
+
591
   addSelectedTextChangeListener(listener) {
598
   addSelectedTextChangeListener(listener) {
592
     this._selectedTextChangeListeners.push(listener);
599
     this._selectedTextChangeListeners.push(listener);
593
   }
600
   }

+ 2
- 0
src/WebviewMessageHandler.js View File

104
       return `zss_editor.setTitleFocusHandler();`;
104
       return `zss_editor.setTitleFocusHandler();`;
105
     case `${actions.setContentFocusHandler}`:
105
     case `${actions.setContentFocusHandler}`:
106
       return `zss_editor.setContentFocusHandler();`;
106
       return `zss_editor.setContentFocusHandler();`;
107
+    case `${actions.setContentBlurHandler}`:
108
+        return `zss_editor.setContentBlurHandler();`;
107
     case `${actions.getTitleHtml}`:
109
     case `${actions.getTitleHtml}`:
108
       return `var html = zss_editor.getTitleHTML();
110
       return `var html = zss_editor.getTitleHTML();
109
       ReactNativeWebView.postMessage(JSON.stringify({type: '${messages.TITLE_HTML_RESPONSE}', data: html}));`
111
       ReactNativeWebView.postMessage(JSON.stringify({type: '${messages.TITLE_HTML_RESPONSE}', data: html}));`

+ 2
- 0
src/const.js View File

45
   setContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',
45
   setContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',
46
   setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
46
   setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
47
   setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
47
   setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
48
+  setContentBlurHandler: 'SET_CONTENT_BLUR_HANDLER',
48
   prepareInsert: 'PREPARE_INSERT',
49
   prepareInsert: 'PREPARE_INSERT',
49
   restoreSelection: 'RESTORE_SELECTION',
50
   restoreSelection: 'RESTORE_SELECTION',
50
   setCustomCSS: 'SET_CUSTOM_CSS',
51
   setCustomCSS: 'SET_CUSTOM_CSS',
66
   LOG: 'LOG',
67
   LOG: 'LOG',
67
   TITLE_FOCUSED: 'TITLE_FOCUSED',
68
   TITLE_FOCUSED: 'TITLE_FOCUSED',
68
   CONTENT_FOCUSED: 'CONTENT_FOCUSED',
69
   CONTENT_FOCUSED: 'CONTENT_FOCUSED',
70
+  CONTENT_BLUR: 'CONTENT_BLUR',
69
   SELECTION_CHANGE: 'SELECTION_CHANGE',
71
   SELECTION_CHANGE: 'SELECTION_CHANGE',
70
   CONTENT_CHANGE: 'CONTENT_CHANGE',
72
   CONTENT_CHANGE: 'CONTENT_CHANGE',
71
   SELECTED_TEXT_RESPONSE: 'SELECTED_TEXT_RESPONSE',
73
   SELECTED_TEXT_RESPONSE: 'SELECTED_TEXT_RESPONSE',

+ 14
- 1
src/editor.html View File

916
 				whenPastingInsertAsPlainText('zss_editor_title');
916
 				whenPastingInsertAsPlainText('zss_editor_title');
917
 				whenPastingInsertAsPlainText('zss_editor_content');
917
 				whenPastingInsertAsPlainText('zss_editor_content');
918
 
918
 
919
-				zss_editor.focusContent();
919
+				// zss_editor.focusContent();
920
 
920
 
921
 				setTimeout(function() {
921
 				setTimeout(function() {
922
 					ReactNativeWebView.postMessage(JSON.stringify({type: 'ZSS_INITIALIZED'}))
922
 					ReactNativeWebView.postMessage(JSON.stringify({type: 'ZSS_INITIALIZED'}))
1355
 			zss_editor.insertEmoji = function(url) {
1355
 			zss_editor.insertEmoji = function(url) {
1356
 				zss_editor.restorerange();
1356
 				zss_editor.restorerange();
1357
 				document.execCommand('insertHTML', false, '<img class="emoji" src="' + encodeHtmlEntities(url) + '"/>');
1357
 				document.execCommand('insertHTML', false, '<img class="emoji" src="' + encodeHtmlEntities(url) + '"/>');
1358
+				zss_editor.blurContentEditor()
1358
 				zss_editor.enabledEditingItems();
1359
 				zss_editor.enabledEditingItems();
1359
 			}
1360
 			}
1360
 
1361
 
1626
 				editor.focus(callbackHandler);
1627
 				editor.focus(callbackHandler);
1627
 			}
1628
 			}
1628
 
1629
 
1630
+			function addBlurEvent(editorId, callbackHandler) {
1631
+				var editor = $('#' + editorId);
1632
+				editor.blur(callbackHandler);
1633
+			}
1634
+
1629
 			zss_editor.setTitleFocusHandler = function() {
1635
 			zss_editor.setTitleFocusHandler = function() {
1630
 				addFocusEvent('zss_editor_title', function() {
1636
 				addFocusEvent('zss_editor_title', function() {
1631
 					ReactNativeWebView.postMessage(JSON.stringify({type: 'TITLE_FOCUSED'}))
1637
 					ReactNativeWebView.postMessage(JSON.stringify({type: 'TITLE_FOCUSED'}))
1638
 				});
1644
 				});
1639
 			}
1645
 			}
1640
 
1646
 
1647
+			zss_editor.setContentBlurHandler = function() {
1648
+				addBlurEvent('zss_editor_content', function() {
1649
+					ReactNativeWebView.postMessage(JSON.stringify({type: 'CONTENT_BLUR'}))
1650
+				});
1651
+			}
1652
+
1641
 			zss_editor.setEditorHeight = function(editorHeight) {
1653
 			zss_editor.setEditorHeight = function(editorHeight) {
1642
 				zss_editor.editorHeight = editorHeight;
1654
 				zss_editor.editorHeight = editorHeight;
1643
 			}
1655
 			}
1695
 				padding-left: 10px;
1707
 				padding-left: 10px;
1696
 				padding-right: 10px;
1708
 				padding-right: 10px;
1697
 				line-height: 20px;
1709
 				line-height: 20px;
1710
+				caret-color:rgb(90, 149, 211)
1698
 			}
1711
 			}
1699
 
1712
 
1700
 			#zss_editor_title {
1713
 			#zss_editor_title {