npm
/
react-native-zss-rich-text-editor
關注 10
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 3 Wiki 活動
瀏覽代碼

Custom CSS as prop and method

Yedidya Kennard 9 年之前
父節點
382fa00298
當前提交
bd591eef7e
共有 5 個檔案被更改，包括 27 行新增 和 4 行删除
分割檢視 顯示文件統計
  1. 10
    1
      src/RichTextEditor.js
  2. 5
    0
      src/WebviewMessageHandler.js
  3. 1
    1
      src/ZSSRichTextEditor/style.css
  4. 3
    2
      src/const.js
  5. 8
    0
      src/editor.html

+ 10
- 1
src/RichTextEditor.js 查看文件 

@@ -14,7 +14,8 @@ export default class RichTextEditor extends Component {
14 14 
   static propTypes = {
15 15 
     initialTitleHTML: PropTypes.string,
16 16 
     initialContentHTML: PropTypes.string,
17 
-    editorInitializedCallback: PropTypes.func
17 
+    editorInitializedCallback: PropTypes.func,
18 
+    customCSS: PropTypes.string
18 19 
   };
19 20
20 21 
   constructor(props) {
 
@@ -58,9 +59,13 @@ export default class RichTextEditor extends Component {
58 59 
           }
59 60 
           break;
60 61 
         case messages.ZSS_INITIALIZED:
62 
+          if (this.props.customCSS) {
63 
+            this.setCustomCSS(this.props.customCSS);
64 
+          }
61 65 
           this.setTitleHTML(this.props.initialTitleHTML);
62 66 
           this.setContentHTML(this.props.initialContentHTML);
63 67 
           this.props.editorInitializedCallback && this.props.editorInitializedCallback();
68 
+
64 69 
           break;
65 70 
         case messages.LOG:
66 71 
           console.log('FROM ZSS', message.data);
 
@@ -339,6 +344,10 @@ export default class RichTextEditor extends Component {
339 344 
     this._sendAction(actions.setContentPlaceholder);
340 345 
   }
341 346
347 
+  setCustomCSS(css) {
348 
+    this._sendAction(actions.setCustomCSS, css);
349 
+  }
350 
+
342 351 
   prepareInsert() {
343 352 
     this._sendAction(actions.prepareInsert);
344 353 
   }

+ 5
- 0
src/WebviewMessageHandler.js 查看文件 

@@ -3,7 +3,9 @@ import {actions, messages} from './const';
3 3 
 export const InjectedMessageHandler = `
4 4 
   if (WebViewBridge) {
5 5 
     WebViewBridge.onMessage = function (message) {
6 
+
6 7 
       const action = JSON.parse(message);
8 
+
7 9 
       switch(action.type) {
8 10 
         case '${actions.setTitleHtml}':
9 11 
           zss_editor.setTitleHTML(action.data);
 
@@ -124,6 +126,9 @@ export const InjectedMessageHandler = `
124 126 
         case '${actions.restoreSelection}':
125 127 
           zss_editor.restorerange();
126 128 
           break;
129 
+        case '${actions.setCustomCSS}':
130 
+          zss_editor.setCustomCSS(action.data);
131 
+          break;
127 132 
       }
128 133 
     };
129 134 
   }

+ 1
- 1
src/ZSSRichTextEditor/style.css 查看文件 

@@ -37,7 +37,7 @@ audio {
37 37 
     padding: 20px 0;
38 38 
 }
39 39
40 
-div.zs_editor_content {
40 
+div.zss_editor_content {
41 41 
     font-family: Arial, Helvetica, sans-serif;
42 42 
     color: #000;
43 43 
     width: 100%;

+ 3
- 2
src/const.js 查看文件 

@@ -38,7 +38,8 @@ export const actions = {
38 38 
   setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
39 39 
   setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
40 40 
   prepareInsert: 'PREPARE_INSERT',
41 
-  restoreSelection: 'RESTORE_SELECTION'
41 
+  restoreSelection: 'RESTORE_SELECTION',
42 
+  setCustomCSS: 'SET_CUSTOM_CSS'
42 43 
 };
43 44
44 45 
 
@@ -51,4 +52,4 @@ export const messages = {
51 52 
   TITLE_FOCUSED: 'TITLE_FOCUSED',
52 53 
   CONTENT_FOCUSED: 'CONTENT_FOCUSED',
53 54 
   SELECTION_CHANGE: 'SELECTION_CHANGE'
54 
-}
55 
+};

+ 8
- 0
src/editor.html 查看文件 

@@ -1,6 +1,7 @@
1 1 
 <!DOCTYPE html>
2 2 
 <html>
3 3 
 	<head>
4 
+
4 5 
 		<title>ZSSRichTextEditor</title>
5 6 
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6 7 
 		<!-- jQuery Source For ZSSRichTextEditor -->
 
@@ -11,6 +12,13 @@
11 12 
 		<script type="text/javascript" src="ZSSRichTextEditor/ZSSRichTextEditor.js"></script>
12 13 
 		<!-- CSS Styles for ZSSRichTextEditor -->
13 14 
 		<link rel="stylesheet" type="text/css" href="ZSSRichTextEditor/style.css">
15 
+
16 
+		<style type="text/css">
17 
+			/* Custom CSS Styling */
18 
+			/*customcss*/
19 
+
20 
+		</style>
21 
+
14 22 
 	</head>
15 23
16 24 
 	<body onLoad="zss_editor.init();">