Ver código fonte

added dynamic integration of tinymce

Skylsmoi 5 anos atrás
pai
commit
2dece80fcf
1 arquivos alterados com 16 adições e 16 exclusões
  1. 16 16
      dist/index.html

+ 16 - 16
dist/index.html Ver arquivo

92
     </script>
92
     </script>
93
 
93
 
94
     <script type='text/javascript'>
94
     <script type='text/javascript'>
95
-      $(document).ready(function () {
96
-        wysiwyg = function () {
95
+      (function () {
96
+        wysiwyg = function (selector, handleOnChange) {
97
           function base64EncodeAndTinyMceInsert (files) {
97
           function base64EncodeAndTinyMceInsert (files) {
98
             for (var i = 0; i < files.length; i++) {
98
             for (var i = 0; i < files.length; i++) {
99
               if (files[i].size > 1000000)
99
               if (files[i].size > 1000000)
126
           });
126
           });
127
 
127
 
128
           tinymce.init({
128
           tinymce.init({
129
-            /*editor_deselector : "notawysiwygtext", // class="notawysiwygtext" will not have tinyMCE
130
-            editor_selector : "wysiwygtext", // class="wysiwygtext" will.*/
131
-            selector: 'textarea',
129
+            selector: selector,
132
             // height: 130,
130
             // height: 130,
133
             // width: 530,
131
             // width: 530,
134
             menubar: false,
132
             menubar: false,
144
               '//www.tinymce.com/css/codepen.min.css'
142
               '//www.tinymce.com/css/codepen.min.css'
145
             ],
143
             ],
146
             setup: function ($editor) {
144
             setup: function ($editor) {
145
+              $editor.on('change', function(e) {
146
+                handleOnChange({target: {value: $editor.getContent()}}) // target.value to emulate a js event so the react handler can expect one
147
+              })
148
+
147
               //////////////////////////////////////////////
149
               //////////////////////////////////////////////
148
               // add custom btn to handle image by selecting them with system explorer
150
               // add custom btn to handle image by selecting them with system explorer
149
               $editor.addButton('customInsertImage', {
151
               $editor.addButton('customInsertImage', {
168
               //////////////////////////////////////////////
170
               //////////////////////////////////////////////
169
               // Handle drag & drop image into TinyMce by encoding them in base64 (to avoid uploading them somewhere and keep saving comment in string format)
171
               // Handle drag & drop image into TinyMce by encoding them in base64 (to avoid uploading them somewhere and keep saving comment in string format)
170
               $editor
172
               $editor
171
-              .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
172
-                e.preventDefault()
173
-                e.stopPropagation()
174
-              })
175
-              .on('drop', function(e) {
176
-                base64EncodeAndTinyMceInsert(e.dataTransfer.files)
177
-              })
173
+                .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
174
+                  e.preventDefault()
175
+                  e.stopPropagation()
176
+                })
177
+                .on('drop', function(e) {
178
+                  base64EncodeAndTinyMceInsert(e.dataTransfer.files)
179
+                })
178
             }
180
             }
179
-          });
181
+          })
180
         }
182
         }
181
-
182
-        wysiwyg()
183
-      })
183
+      })()
184
     </script>
184
     </script>
185
   </body>
185
   </body>
186
 </html>
186
 </html>