json-object-editor 0.10.312 → 0.10.320

package/js/joe.js

@@ -5571,53 +5571,110 @@ this.renderHTMLContent = function(specs){
     var tinyconfig = {};
     this.renderTinyMCEField = function(prop){
         /*|{
-            tags:'render,field,wysiwyg'
+            tags:'render,field,wysiwyg,tinyMCE',
         }|*/
-         var locked = self.propAsFuncOrValue(prop.locked)?' disabled ':'';
-        var height = (prop.height)?'style="height:'+prop.height+';"' : '';
-        var editor_id = cuid();
-        var html=
-            '<div class="joe-tinymce-holder joe-texteditor-field joe-field" '
-            /*+height*/+' data-texteditor_id="'+editor_id+'" data-ftype="tinymce" name="'+prop.name+'">'+
-            '<div id="'+editor_id+'" class="joe-tinymce">'+(prop.value || "")+'</div>'+
-            '</div>';
+        const locked = self.propAsFuncOrValue(prop.locked) ? 'disabled' : '';
+        const heightStyle = (prop.height) ? `style="height:${prop.height};"` : '';
+        const editor_id = cuid();
+        
+        const html =
+          `<div class="joe-tinymce-holder joe-texteditor-field joe-field wysiwyg-field"
+               data-texteditor_id="${editor_id}"
+               data-ftype="tinymce"
+               data-name="${prop.name}">
+             <textarea id="${editor_id}" class="joe-tinymce" ${locked} ${heightStyle}>${prop.value || ''}</textarea>
+           </div>`;
+        
         return html;
     };
 
     this.readyTinyMCEs = function() {
         tinymce.init({
             selector: ".joe-tinymce",
-            //max_height: 300,
-           // height:500,
-        plugins:['table wordcount link image code searchreplace autoresize fullscreen'],
-        menu : { // this is the complete default configuration
-        edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},
-        format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
-        table  : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'},
-        tools  : {title : 'Tools' , items : 'spellchecker code link image'}
-        },
-        toolbar: 'fullscreen | undo redo | bold italic removeformat | bullist numlist outdent indent',
-          //  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
-          /*  plugins: [
-                "advlist autolink lists link image charmap print preview anchor",
-                "searchreplace visualblocks code fullscreen",
-                "insertdatetime media table contextmenu paste"
-            ],*/
-            /*toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"*/
-        });
-        $('.joe-tinymce').each(function(){
-            var field = self.getField($(this).parents('.wysiwyg-field').data('name'));
-            if(field.height){
-                $('.mce-edit-area').height(field.height);
+            base_url: '/JsonObjectEditor/js/plugins/tinymce',
+            suffix: '.min',
+            license_key: 'gpl',
+            browser_spellcheck: true,
+            contextmenu: false,
+            content_style: `
+                body {
+                font-size: 16px;
+                line-height: 21px;
+                }
+            `,
+            plugins: ['table', 'wordcount', 'link', 'image', 'code', 'searchreplace', 'autoresize', 'fullscreen', 'lists'],
+   
+            toolbar: 'fullscreen | undo redo | h1 h2 h3 h4 h5 |bold italic removeformat | bullist numlist outdent indent | code',
+          
+            // Local TinyMCE asset paths
+            skin_url: '/JsonObjectEditor/js/plugins/tinymce/skins/ui/oxide/',
+            content_css:'/JsonObjectEditor/js/plugins/tinymce/skins/content/default/content.css',
+            theme_url: '/JsonObjectEditor/js/plugins/tinymce/themes/silver/theme.min.js',
+            icons_url: '/JsonObjectEditor/js/plugins/tinymce/icons/default/icons.min.js',
+          
+            // Optional: hook into instance ready for dynamic height
+            init_instance_callback: function(editor) {
+              const textarea = editor.targetElm;
+              const fieldContainer = textarea.closest('.wysiwyg-field');
+              if (fieldContainer) {
+                const fieldName = fieldContainer.getAttribute('data-name');
+                const field = self.getField(fieldName);
+                if (field && field.height) {
+                  const iframe = editor.getContainer().querySelector('iframe');
+                  if (iframe) {
+                    iframe.style.height = `${field.height}px`;
+                  }
+                }
+              }
             }
-
-        });
+          });
 
     };
+    this.cleanTinyMCEs  = function(html) {
+        const temp = document.createElement('div');
+        temp.innerHTML = html;
+      
+        // Loop through all elements
+        temp.querySelectorAll('*').forEach(el => {
+          // Remove all data-* attributes
+          [...el.attributes].forEach(attr => {
+            if (attr.name.startsWith('data-')) {
+              el.removeAttribute(attr.name);
+            }
+      
+            // Optionally clean up some noisy inline styles
+            if (attr.name === 'style') {
+              const styleVal = attr.value.toLowerCase();
+              if (
+                styleVal.includes('font-weight: 400') ||
+                styleVal.includes('font-family') ||
+                styleVal.includes('white-space:pre') ||
+                styleVal.includes('line-height') ||
+                styleVal.includes('margin') ||
+                styleVal.includes('orphans') || // lol
+                styleVal.includes('widows')
+              ) {
+                el.removeAttribute('style');
+              }
+            }
+          });
+      
+          // Clean up empty span tags (common from Google Docs)
+          if (
+            el.tagName === 'SPAN' &&
+            el.attributes.length === 0 &&
+            el.textContent.trim() === ''
+          ) {
+            el.remove();
+          }
+        });
+      
+        return temp.innerHTML;
+      }
     self.texteditors = [];
 
     this.readyTextEditors = this.readyTinyMCEs;
-    encapsulateFieldType('wysiwyg',self.renderTinyMCEField,{ready:self.readyTextEditors});
+    encapsulateFieldType('wysiwyg',self.renderTinyMCEField,{ready:self.readyTextEditors,clean:this.cleanTinyMCEs});
 
 /*----------------------------->
 Y | Object Field
@@ -7918,7 +7975,7 @@ Field Rendering Helpers
 				case 'text':
 				default:
 
-					prop = $(this).attr('name');
+					prop = this.getAttribute('data-name') || this.getAttribute('name')
 					if(prop && prop != 'undefined') {//make sure it's suppoesed to be a prop field
                         switch ($(this).data('ftype')) {
                             case 'passthrough':
@@ -7937,8 +7994,13 @@ Field Rendering Helpers
                                 object[prop] =(editor)? editor.getData():self.current.object[prop];
                                 break;
                             case 'tinymce':
-                                var editor = tinymce.editors.where({id:$(this).data('texteditor_id')})[0]||false;
-                                object[prop] =(editor)? editor.getContent():self.current.object[prop];
+                                // var editor = tinymce.editors.where({id:$(this).data('texteditor_id')})[0]||false;
+                                // object[prop] =(editor)? editor.getContent():self.current.object[prop];
+                                // break;
+                                var editorId = this.getAttribute('data-texteditor_id');
+                                var editor = window.tinymce?.get(editorId);
+                                object[prop] = (editor) ? editor.getContent() : self.current.object[prop];
+                                object[prop] = self.cleanTinyMCEs(object[prop]);
                                 break;
 
                             case 'multisorter':