npm
/
react-native-zss-rich-text-editor
보기 10
좋아요 0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 3 위키 Activity
소스 검색

Custom CSS as prop and method

Yedidya Kennard 8 년 전
부모
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 
   static propTypes = {
 14 
   static propTypes = {
15 
     initialTitleHTML: PropTypes.string,
 15 
     initialTitleHTML: PropTypes.string,
16 
     initialContentHTML: PropTypes.string,
 16 
     initialContentHTML: PropTypes.string,
17 
-    editorInitializedCallback: PropTypes.func
17 
+    editorInitializedCallback: PropTypes.func,
18 
+    customCSS: PropTypes.string
18 
   };
 19 
   };
19
20
20 
   constructor(props) {
 21 
   constructor(props) {
58 
           }
 59 
           }
59 
           break;
 60 
           break;
60 
         case messages.ZSS_INITIALIZED:
 61 
         case messages.ZSS_INITIALIZED:
62 
+          if (this.props.customCSS) {
63 
+            this.setCustomCSS(this.props.customCSS);
64 
+          }
61 
           this.setTitleHTML(this.props.initialTitleHTML);
 65 
           this.setTitleHTML(this.props.initialTitleHTML);
62 
           this.setContentHTML(this.props.initialContentHTML);
 66 
           this.setContentHTML(this.props.initialContentHTML);
63 
           this.props.editorInitializedCallback && this.props.editorInitializedCallback();
 67 
           this.props.editorInitializedCallback && this.props.editorInitializedCallback();
68 
+
64 
           break;
 69 
           break;
65 
         case messages.LOG:
 70 
         case messages.LOG:
66 
           console.log('FROM ZSS', message.data);
 71 
           console.log('FROM ZSS', message.data);
339 
     this._sendAction(actions.setContentPlaceholder);
 344 
     this._sendAction(actions.setContentPlaceholder);
340 
   }
 345 
   }
341
346
347 
+  setCustomCSS(css) {
348 
+    this._sendAction(actions.setCustomCSS, css);
349 
+  }
350 
+
342 
   prepareInsert() {
 351 
   prepareInsert() {
343 
     this._sendAction(actions.prepareInsert);
 352 
     this._sendAction(actions.prepareInsert);
344 
   }
 353 
   }

+ 5
- 0
src/WebviewMessageHandler.js 파일 보기

3 
 export const InjectedMessageHandler = `
 3 
 export const InjectedMessageHandler = `
4 
   if (WebViewBridge) {
 4 
   if (WebViewBridge) {
5 
     WebViewBridge.onMessage = function (message) {
 5 
     WebViewBridge.onMessage = function (message) {
6 
+
6 
       const action = JSON.parse(message);
 7 
       const action = JSON.parse(message);
8 
+
7 
       switch(action.type) {
 9 
       switch(action.type) {
8 
         case '${actions.setTitleHtml}':
 10 
         case '${actions.setTitleHtml}':
9 
           zss_editor.setTitleHTML(action.data);
 11 
           zss_editor.setTitleHTML(action.data);
124 
         case '${actions.restoreSelection}':
 126 
         case '${actions.restoreSelection}':
125 
           zss_editor.restorerange();
 127 
           zss_editor.restorerange();
126 
           break;
 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 
     padding: 20px 0;
 37 
     padding: 20px 0;
38 
 }
 38 
 }
39
39
40 
-div.zs_editor_content {
40 
+div.zss_editor_content {
41 
     font-family: Arial, Helvetica, sans-serif;
 41 
     font-family: Arial, Helvetica, sans-serif;
42 
     color: #000;
 42 
     color: #000;
43 
     width: 100%;
 43 
     width: 100%;

+ 3
- 2
src/const.js 파일 보기

38 
   setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
 38 
   setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
39 
   setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
 39 
   setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
40 
   prepareInsert: 'PREPARE_INSERT',
 40 
   prepareInsert: 'PREPARE_INSERT',
41 
-  restoreSelection: 'RESTORE_SELECTION'
41 
+  restoreSelection: 'RESTORE_SELECTION',
42 
+  setCustomCSS: 'SET_CUSTOM_CSS'
42 
 };
 43 
 };
43
44
44
45
51 
   TITLE_FOCUSED: 'TITLE_FOCUSED',
 52 
   TITLE_FOCUSED: 'TITLE_FOCUSED',
52 
   CONTENT_FOCUSED: 'CONTENT_FOCUSED',
 53 
   CONTENT_FOCUSED: 'CONTENT_FOCUSED',
53 
   SELECTION_CHANGE: 'SELECTION_CHANGE'
 54 
   SELECTION_CHANGE: 'SELECTION_CHANGE'
54 
-}
55 
+};

+ 8
- 0
src/editor.html 파일 보기

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