npm
/
react-native-zss-rich-text-editor
关注 10
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 3 百科 动态
浏览代码

initial working commit using wix-richtext, some hacks were needed in the build process

David 8 年前
父节点
d0d4790b1f
当前提交
dad006551c
共有 6 个文件被更改，包括 50 次插入 和 3 次删除
合并视图 显示文件统计
  1. 3
    0
      .gitignore
  2. 4
    0
      hack-fix-guard.sh
  3. 8
    1
      package.json
  4. 6
    1
      src/WebviewMessageHandler.js
  5. 24
    1
      src/editor.html
  6. 5
    0
      src/wixck3.min.js

+ 3
- 0
.gitignore 查看文件

2 
 #
 2 
 #
3 
 .DS_Store
 3 
 .DS_Store
4
4
5 
+src/ckeditor/
6 
+src/NoUIBundleWixRichText.js
7 
+src/wixck.min.js
5 
 # Xcode
 8 
 # Xcode
6 
 #
 9 
 #
7 
 build/
 10 
 build/

+ 4
- 0
hack-fix-guard.sh 查看文件

1 
+#!/bin/bash
2 
+sed -i '' 's/WIX_GUARD:.*CK_GUARD:/WIX_GUARD:"\\u200b",CK_GUARD:/' './src/wixck.min.js'
3 
+sed -i '' 's/wixck.min.js/wixck3.min.js/' './src/NoUIBundleWixRichText.js'
4 
+mv ./src/wixck.min.js ./src/wixck3.min.js

+ 8
- 1
package.json 查看文件

4 
     "type": "git",
 4 
     "type": "git",
5 
     "url": "https://github.com/wix/react-native-zss-rich-text-editor.git"
 5 
     "url": "https://github.com/wix/react-native-zss-rich-text-editor.git"
6 
   },
 6 
   },
7 
+  "scripts": {
8 
+    "copy-wix-ck": "cp -R ../wix-ck-editor/dist/ node_modules/wix-richtext/dist",
9 
+    "copy-richtext-from-node_modules": "cp -R node_modules/wix-richtext/dist/ckeditor src/ && cp node_modules/wix-richtext/dist/NoUIBundleWixRichText.js src/ && cp node_modules/wix-richtext/dist/wixck.min.js src/",
10 
+    "copy-into-blog-oneapp": "rm -rf ~/projects/blog-manager-mobile/node_modules/react-native-zss-rich-text-editor && cp -R ~/projects/react-native-zss-rich-text-editor ~/projects/blog-manager-mobile/node_modules/",
11 
+    "build": "npm run copy-wix-ck && npm run copy-richtext-from-node_modules && . hack-fix-guard.sh && npm run copy-into-blog-oneapp"
12 
+  },
7 
   "version": "1.0.1",
 13 
   "version": "1.0.1",
8 
   "description": "React Native Wrapper for ZSSRichTextEditor",
 14 
   "description": "React Native Wrapper for ZSSRichTextEditor",
9 
   "main": "index.js",
 15 
   "main": "index.js",
10 
   "license": "SEE LICENSE IN LICENSE",
 16 
   "license": "SEE LICENSE IN LICENSE",
11 
   "dependencies": {
 17 
   "dependencies": {
12 
-    "react-native-webview-bridge-updated": "^1.0.0"
18 
+    "react-native-webview-bridge-updated": "^1.0.0",
19 
+    "wix-richtext": "^1.0.261"
13 
   },
 20 
   },
14 
   "peerDependencies": {
 21 
   "peerDependencies": {
15 
     "react": "*",
 22 
     "react": "*",

+ 6
- 1
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 
+console.log(message)
7 
       const action = JSON.parse(message);
 7 
       const action = JSON.parse(message);
8
8
9 
       switch(action.type) {
 9 
       switch(action.type) {
33 
           break;
 33 
           break;
34 
         case '${actions.setBold}':
 34 
         case '${actions.setBold}':
35 
           zss_editor.setBold();
 35 
           zss_editor.setBold();
36 
+          window.wixRichTextInstance.execCommand('bold');
36 
           break;
 37 
           break;
37 
         case '${actions.setItalic}':
 38 
         case '${actions.setItalic}':
38 
           zss_editor.setItalic();
 39 
           zss_editor.setItalic();
40 
+          window.wixRichTextInstance.execCommand('italic');
39 
           break;
 41 
           break;
40 
         case '${actions.setUnderline}':
 42 
         case '${actions.setUnderline}':
41 
           zss_editor.setUnderline();
 43 
           zss_editor.setUnderline();
44 
+          window.wixRichTextInstance.execCommand('underline');
42 
           break;
 45 
           break;
43 
         case '${actions.heading1}':
 46 
         case '${actions.heading1}':
44 
           zss_editor.setHeading('h1');
 47 
           zss_editor.setHeading('h1');
78 
           break;
 81 
           break;
79 
         case '${actions.insertBulletsList}':
 82 
         case '${actions.insertBulletsList}':
80 
           zss_editor.setUnorderedList();
 83 
           zss_editor.setUnorderedList();
84 
+          window.wixRichTextInstance.execCommand('bulletedlist');
81 
           break;
 85 
           break;
82 
         case '${actions.insertOrderedList}':
 86 
         case '${actions.insertOrderedList}':
83 
           zss_editor.setOrderedList();
 87 
           zss_editor.setOrderedList();
88 
+          window.wixRichTextInstance.execCommand('numberedlist');
84 
           break;
 89 
           break;
85 
         case '${actions.insertLink}':
 90 
         case '${actions.insertLink}':
86 
           zss_editor.insertLink(action.data.url, action.data.title);
 91 
           zss_editor.insertLink(action.data.url, action.data.title);

+ 24
- 1
src/editor.html 查看文件

1741 
 			/* Custom CSS Styling */
 1741 
 			/* Custom CSS Styling */
1742 
 			/*customcss*/
 1742 
 			/*customcss*/
1743 
 		</style>
 1743 
 		</style>
1744 
+        <script src="./NoUIBundleWixRichText.js"></script>
1744 
 	</head>
 1745 
 	</head>
1745
1746
1746 
 	<body>
 1747 
 	<body>
1747 
 		<!-- ZSSRichTextEditor Editable Content -->
 1748 
 		<!-- ZSSRichTextEditor Editable Content -->
1748 
 		<div id="zss_editor_title" class="zss_editor_title" contenteditable="true" placeholder="" disableLineBreaks="true"></div>
 1749 
 		<div id="zss_editor_title" class="zss_editor_title" contenteditable="true" placeholder="" disableLineBreaks="true"></div>
1749 
 		<div id="separatorContainer"><hr></div>
 1750 
 		<div id="separatorContainer"><hr></div>
1750 
-		<div id="zss_editor_content" class="zs_editor_content" contenteditable="true" placeholder=""></div>
1751 
+        <div id="wix-richtext"></div>
1752 
+		<div id="zss_editor_content" class="zs_editor_content" contenteditable="true" placeholder="" style="display:none"></div>
1751 
 		<div id="zss_editor_footer"></div>
 1753 
 		<div id="zss_editor_footer"></div>
1754 
+        <script type="text/javascript">
1755 
+            function detectActiveElement(){
1756 
+                if(document.activeElement.tagName === 'IFRAME'){
1757 
+                    WebViewBridge.send(JSON.stringify({type: 'CONTENT_FOCUSED'}))
1758 
+                }
1759 
+            }
1760 
+            window.addEventListener('blur', detectActiveElement, true);
1761 
+            window.addEventListener('focus', detectActiveElement, true);
1762 
+            richtext.createInstance({
1763 
+                domElement: window.document.getElementById('wix-richtext'),
1764 
+                initialData: '<p>WIXRICHTEXT</p>',
1765 
+                autoGrow: false,
1766 
+                onLoaded: function(instance){
1767 
+                    window.wixRichTextInstance = instance;
1768 
+                    instance.resize(null, 500);
1769 
+//                    instance.onFocus(function() {
1770 
+//                        instance.resize(null, 1000);
1771 
+//                    })
1772 
+                }
1773 
+            })
1774 
+        </script>
1752 
 	</body>
 1775 
 	</body>
1753 
 </html>
 1776 
 </html>

+ 5
- 0
src/wixck3.min.js
文件差异内容过多而无法显示
查看文件