npm
/
react-native-zss-rich-text-editor
Следить 10
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 3 Вики Активность
Просмотр исходного кода

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

David 8 лет назад
Родитель
d0d4790b1f
Сommit
dad006551c
6 измененных файлов: 50 добавлений и 3 удалений
Разделённый вид Показать статистику Diff
  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,6 +2,9 @@
2 2 
 #
3 3 
 .DS_Store
4 4
5 
+src/ckeditor/
6 
+src/NoUIBundleWixRichText.js
7 
+src/wixck.min.js
5 8 
 # Xcode
6 9 
 #
7 10 
 build/

+ 4
- 0
hack-fix-guard.sh Просмотреть файл 

@@ -0,0 +1,4 @@
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,12 +4,19 @@
4 4 
     "type": "git",
5 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 13 
   "version": "1.0.1",
8 14 
   "description": "React Native Wrapper for ZSSRichTextEditor",
9 15 
   "main": "index.js",
10 16 
   "license": "SEE LICENSE IN LICENSE",
11 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 21 
   "peerDependencies": {
15 22 
     "react": "*",

+ 6
- 1
src/WebviewMessageHandler.js Просмотреть файл 

@@ -3,7 +3,7 @@ import {actions, messages} from './const';
3 3 
 export const InjectedMessageHandler = `
4 4 
   if (WebViewBridge) {
5 5 
     WebViewBridge.onMessage = function (message) {
6 
-
6 
+console.log(message)
7 7 
       const action = JSON.parse(message);
8 8
9 9 
       switch(action.type) {
 
@@ -33,12 +33,15 @@ export const InjectedMessageHandler = `
33 33 
           break;
34 34 
         case '${actions.setBold}':
35 35 
           zss_editor.setBold();
36 
+          window.wixRichTextInstance.execCommand('bold');
36 37 
           break;
37 38 
         case '${actions.setItalic}':
38 39 
           zss_editor.setItalic();
40 
+          window.wixRichTextInstance.execCommand('italic');
39 41 
           break;
40 42 
         case '${actions.setUnderline}':
41 43 
           zss_editor.setUnderline();
44 
+          window.wixRichTextInstance.execCommand('underline');
42 45 
           break;
43 46 
         case '${actions.heading1}':
44 47 
           zss_editor.setHeading('h1');
 
@@ -78,9 +81,11 @@ export const InjectedMessageHandler = `
78 81 
           break;
79 82 
         case '${actions.insertBulletsList}':
80 83 
           zss_editor.setUnorderedList();
84 
+          window.wixRichTextInstance.execCommand('bulletedlist');
81 85 
           break;
82 86 
         case '${actions.insertOrderedList}':
83 87 
           zss_editor.setOrderedList();
88 
+          window.wixRichTextInstance.execCommand('numberedlist');
84 89 
           break;
85 90 
         case '${actions.insertLink}':
86 91 
           zss_editor.insertLink(action.data.url, action.data.title);

+ 24
- 1
src/editor.html Просмотреть файл 

@@ -1741,13 +1741,36 @@
1741 1741 
 			/* Custom CSS Styling */
1742 1742 
 			/*customcss*/
1743 1743 
 		</style>
1744 
+        <script src="./NoUIBundleWixRichText.js"></script>
1744 1745 
 	</head>
1745 1746
1746 1747 
 	<body>
1747 1748 
 		<!-- ZSSRichTextEditor Editable Content -->
1748 1749 
 		<div id="zss_editor_title" class="zss_editor_title" contenteditable="true" placeholder="" disableLineBreaks="true"></div>
1749 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 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 1775 
 	</body>
1753 1776 
 </html>

+ 5
- 0
src/wixck3.min.js
Разница между файлами не показана из-за своего большого размера
Просмотреть файл