Roo/HtmlEditorCore.js
authorAlan <alan@roojs.com>
Fri, 17 Feb 2023 06:28:58 +0000 (14:28 +0800)
committerAlan <alan@roojs.com>
Fri, 17 Feb 2023 06:28:58 +0000 (14:28 +0800)
roojs-bootstrap.js
roojs-bootstrap-debug.js

Roo/HtmlEditorCore.js
roojs-bootstrap-debug.js
roojs-bootstrap.js

index ae58b73..26d1cd0 100644 (file)
@@ -71,7 +71,7 @@ Roo.HtmlEditorCore = function(config){
          * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
          * @param {Roo.HtmlEditorCore} this
          */
-        editorevent: true,
+        editorevent: true 
         
         
     });
index 747380a..c03f007 100644 (file)
@@ -30845,7 +30845,7 @@ Roo.HtmlEditorCore = function(config){
          * @param {Roo.HtmlEditorCore} this
          */
         editorevent: true 
-         
+        
         
     });
     
@@ -32465,31 +32465,26 @@ Roo.HtmlEditorCore.cblack= [
  */
 
 Roo.bootstrap.form.HtmlEditor = function(config){
-    Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this, config);
-    if (!this.toolbars) {
-        this.toolbars = [];
-    }
-    
-    this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+
     this.addEvents({
             /**
              * @event initialize
              * Fires when the editor is fully initialized (including the iframe)
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              */
             initialize: true,
             /**
              * @event activate
              * Fires when the editor is first receives the focus. Any insertion must wait
              * until after this event.
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              */
             activate: true,
              /**
              * @event beforesync
              * Fires before the textarea is updated with content from the editor iframe. Return false
              * to cancel the sync.
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              * @param {String} html
              */
             beforesync: true,
@@ -32497,53 +32492,53 @@ Roo.bootstrap.form.HtmlEditor = function(config){
              * @event beforepush
              * Fires before the iframe editor is updated with content from the textarea. Return false
              * to cancel the push.
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              * @param {String} html
              */
             beforepush: true,
              /**
              * @event sync
              * Fires when the textarea is updated with content from the editor iframe.
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              * @param {String} html
              */
             sync: true,
              /**
              * @event push
              * Fires when the iframe editor is updated with content from the textarea.
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              * @param {String} html
              */
             push: true,
              /**
              * @event editmodechange
              * Fires when the editor switches edit modes
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
              */
             editmodechange: true,
             /**
              * @event editorevent
              * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              */
             editorevent: true,
             /**
              * @event firstfocus
              * Fires when on first focus - needed by toolbars..
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              */
             firstfocus: true,
             /**
              * @event autosave
              * Auto save the htmlEditor value as a file into Events
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              */
             autosave: true,
             /**
              * @event savedpreview
              * preview the saved version of htmlEditor
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              */
             savedpreview: true,
              /**
@@ -32561,16 +32556,31 @@ Roo.bootstrap.form.HtmlEditor = function(config){
             /**
             * @event imageadd
             * Fires when on any editor when an image is added (excluding paste)
-            * @param {Roo.HtmlEditorCore} this
+            * @param {Roo.bootstrap.form.HtmlEditor} this
             */
            imageadd: true ,
             /**
+            * @event imageupdated
+            * Fires when on any editor when an image is changed (excluding paste)
+            * @param {Roo.bootstrap.form.HtmlEditor} this
+            * @param {HTMLElement} img could also be a figure if blocks are enabled
+            */
+           imageupdate: true ,
+           /**
             * @event imagedelete
             * Fires when on any editor when an image is deleted
-            * @param {Roo.HtmlEditorCore} this
+            * @param {Roo.bootstrap.form.HtmlEditor} this
+            * @param {HTMLElement} img could also be a figure if blocks are enabled
             */
            imagedelete: true  
-        });
+    });
+    Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this, config);
+    if (!this.toolbars) {
+        this.toolbars = [];
+    }
+    
+    this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+    
 };
 
 
@@ -33114,19 +33124,26 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbar.Standard, Roo.bootstrap.nav.Simp
         }
     
          
-        this.addFiles(Array.prototype.slice.call(this.input.dom.files));
+        this.addFiles(Array.prototype.slice.call(this.input.dom.files), false);
     },
     
-    addFiles : function(far) {
+    addFiles : function(far, fire_add) {
 
+         
+        var editor =  this.editorcore;
+  
         if (!far.length) {
+            if (fire_add) {
+                editor.owner.fireEvent('editorevent', editor.owner, false);
+                editor.owner.fireEvent('imageadd', editor.owner, false);
+            }
             return;
         }
         
         var f = far.pop();
         
         if (!f.type.match(/^image/)) {
-            this.addFiles(far);
+            this.addFiles(far, fire_add);
             return;
         }
          
@@ -33134,7 +33151,6 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbar.Standard, Roo.bootstrap.nav.Simp
         
         var bl = sn  && this.editorcore.enableBlocks ? Roo.htmleditor.Block.factory(sn) : false;
         
-        var editor =  this.editorcore;
         
         var reader = new FileReader();
         reader.addEventListener('load', (function() {
@@ -33142,7 +33158,8 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbar.Standard, Roo.bootstrap.nav.Simp
                 bl.image_src = reader.result;
                 //bl.caption = f.name;
                 bl.updateElement(sn);
-                editor.owner.fireEvent('editorevent', editor, false);
+                editor.owner.fireEvent('editorevent', editor.owner, false);
+                editor.owner.fireEvent('imageupdate', editor.owner, sn);
                 // we only do the first file!! and replace.
                 return;
             }
@@ -33153,17 +33170,18 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbar.Standard, Roo.bootstrap.nav.Simp
                     caption_display : 'none'  //default to hide captions..
                  });
                 editor.insertAtCursor(fig.toHTML());
-                editor.owner.fireEvent('editorevent', editor, false);
+                this.addFiles(far, true);
                 return;
             }
             // just a standard img..
             if (sn && sn.tagName.toUpperCase() == 'IMG') {
                 sn.src = reader.result;
-                editor.owner.fireEvent('editorevent', editor, false);
+                editor.owner.fireEvent('editorevent', editor.owner, false);
+                editor.owner.fireEvent('imageupdate', editor.owner, sn);
                 return;
             }
             editor.insertAtCursor('<img src="' + reader.result +'">');
-            editor.owner.fireEvent('editorevent', editor, false);
+            this.addFiles(far, true);
             
         }).createDelegate(this));
         reader.readAsDataURL(f);
@@ -33329,6 +33347,11 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbar.Standard, Roo.bootstrap.nav.Simp
                 selection.removeAllRanges();
                 selection.addRange(range);
                 this.updateToolbar(null, null, null);
+                if (sn.tagName.toUpperCase() == 'FIGURE') {
+                    this.editor.fireEvent('imagedelete', this.editor, sn);
+                }
+                
+                this.selectedNode = false;
                 this.editorcore.fireEditorEvent(false);
                 return;
             }   
@@ -33348,6 +33371,11 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbar.Standard, Roo.bootstrap.nav.Simp
         
         selection.removeAllRanges();
         selection.addRange(range);
+        if (sn.tagName.toUpperCase() == 'IMG"') {
+            this.editor.fireEvent('imagedelete', this.editor, sn);
+        }
+        
+        this.selectedNode = false;
         this.editorcore.fireEditorEvent(false);
         
         
index 7ab23eb..bb37c5d 100644 (file)
@@ -1400,8 +1400,8 @@ Roo.HtmlEditorCore.black=['APPLET','BASE','BASEFONT','BGSOUND','BLINK','BODY','F
 Roo.HtmlEditorCore.tag_remove=['FONT','TBODY'];Roo.HtmlEditorCore.ablack=['on'];Roo.HtmlEditorCore.aclean=['action','background','codebase','dynsrc','href','lowsrc'];Roo.HtmlEditorCore.pwhite=['http','https','mailto'];Roo.HtmlEditorCore.cwhite=[];Roo.HtmlEditorCore.cblack=[];
 
 // Roo/bootstrap/form/HtmlEditor.js
-Roo.bootstrap.form.HtmlEditor=function(A){Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this,A);if(!this.toolbars){this.toolbars=[];}this.editorcore=new Roo.HtmlEditorCore(Roo.apply({owner:this},A));this.addEvents({initialize:true,activate:true,beforesync:true,beforepush:true,sync:true,push:true,editmodechange:true,editorevent:true,firstfocus:true,autosave:true,savedpreview:true,stylesheetsclick:true,paste:true,imageadd:true,imagedelete:true}
-);};Roo.extend(Roo.bootstrap.form.HtmlEditor,Roo.bootstrap.form.TextArea,{toolbars:true,btns:[],resize:false,height:300,width:false,stylesheets:false,frameId:false,validationEvent:false,deferHeight:true,initialized:false,activated:false,onFocus:Roo.emptyFn,iframePad:3,hideMode:'offsets',tbContainer:false,bodyCls:'',toolbarContainer:function(){return this.wrap.select('.x-html-editor-tb',true).first();
+Roo.bootstrap.form.HtmlEditor=function(A){this.addEvents({initialize:true,activate:true,beforesync:true,beforepush:true,sync:true,push:true,editmodechange:true,editorevent:true,firstfocus:true,autosave:true,savedpreview:true,stylesheetsclick:true,paste:true,imageadd:true,imageupdate:true,imagedelete:true}
+);Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this,A);if(!this.toolbars){this.toolbars=[];}this.editorcore=new Roo.HtmlEditorCore(Roo.apply({owner:this},A));};Roo.extend(Roo.bootstrap.form.HtmlEditor,Roo.bootstrap.form.TextArea,{toolbars:true,btns:[],resize:false,height:300,width:false,stylesheets:false,frameId:false,validationEvent:false,deferHeight:true,initialized:false,activated:false,onFocus:Roo.emptyFn,iframePad:3,hideMode:'offsets',tbContainer:false,bodyCls:'',toolbarContainer:function(){return this.wrap.select('.x-html-editor-tb',true).first();
 },createToolbar:function(){if(this.toolbars===false){return;}if(this.toolbars===true){this.toolbars=['Standard'];}var ar=Array.from(this.toolbars);this.toolbars=[];ar.forEach(function(t,i){if(typeof(t)=='string'){t={xtype:t};}if(typeof(t)=='object'&&typeof(t.xtype)=='string'){t.editor=this;
 t.xns=t.xns||Roo.bootstrap.form.HtmlEditorToolbar;t=Roo.factory(t);}this.toolbars[i]=t;this.toolbars[i].render(this.toolbarContainer());},this);},onRender:function(ct,A){var _t=this;Roo.bootstrap.form.HtmlEditor.superclass.onRender.call(this,ct,A);this.wrap=this.inputEl().wrap({cls:'x-html-editor-wrap',cn:{cls:'x-html-editor-tb'}
 });this.editorcore.onRender(ct,A);this.createToolbar(this);},onResize:function(w,h){Roo.log('resize: '+w+','+h);Roo.bootstrap.form.HtmlEditor.superclass.onResize.apply(this,arguments);var ew=false;var eh=false;if(this.inputEl()){if(typeof w=='number'){var aw=w-this.wrap.getFrameWidth('lr');
@@ -1422,11 +1422,12 @@ F('italic','italic',true);F('underline','underline',true);F('align-left','justif
 F('list-ol','insertorderedlist',true);F('pencil',false,true,function(G){Roo.log(this);this.toggleSourceEdit(G.pressed);});if(this.editor.btns.length>0){for(var i=0;i<this.editor.btns.length;i++){E.push(this.editor.btns[i]);}}this.xtype='NavSimplebar';for(var i=0;
 i<E.length;i++){this.buttons.add(this.addxtypeChild(E[i]));}this.buildToolbarDelete();D.on('editorevent',this.updateToolbar,this);},buildToolbarDelete:function(){this.deleteBtn=this.addxtypeChild({size:'sm',xtype:'Button',xns:Roo.bootstrap,fa:'trash',listeners:{click:this.onDelete.createDelegate(this)}
 });this.deleteBtn.hide();},onImageClick:function(){if(this.input){this.input.un('change',this.onFileSelected,this);}this.input=Roo.get(document.body).createChild({tag:'input',type:'file',style:'display:none',multiple:'multiple'});this.input.on('change',this.onFileSelected,this);
-this.input.dom.click();},onFileSelected:function(e){e.preventDefault();if(typeof(this.input.dom.files)=='undefined'||!this.input.dom.files.length){return;}this.addFiles(Array.prototype.slice.call(this.input.dom.files));},addFiles:function(A){if(!A.length){return;
-}var f=A.pop();if(!f.type.match(/^image/)){this.addFiles(A);return;}var sn=this.selectedNode;var bl=sn&&this.editorcore.enableBlocks?Roo.htmleditor.Block.factory(sn):false;var B=this.editorcore;var C=new FileReader();C.addEventListener('load',(function(){if(bl){bl.image_src=C.result;
-bl.updateElement(sn);B.owner.fireEvent('editorevent',B,false);return;}if(this.editorcore.enableBlocks){var D=new Roo.htmleditor.BlockFigure({image_src:C.result,caption:'',caption_display:'none'});B.insertAtCursor(D.toHTML());B.owner.fireEvent('editorevent',B,false);
-return;}if(sn&&sn.tagName.toUpperCase()=='IMG'){sn.src=C.result;B.owner.fireEvent('editorevent',B,false);return;}B.insertAtCursor('<img src="'+C.result+'">');B.owner.fireEvent('editorevent',B,false);}).createDelegate(this));C.readAsDataURL(f);},onBtnClick:function(id){this.editorcore.relayCmd(id);
-this.editorcore.focus();},onLinkClick:function(A){var B=this.selectedNode&&this.selectedNode.tagName.toUpperCase()=='A'?this.selectedNode.getAttribute('href'):'';Roo.bootstrap.MessageBox.show({title:"Add / Edit Link URL",msg:"Enter the URL for the link",buttons:Roo.bootstrap.MessageBox.OKCANCEL,minWidth:250,scope:this,prompt:true,multiline:false,modal:true,value:B,fn:function(C,D){if(C!='ok'){this.editorcore.focus();
+this.input.dom.click();},onFileSelected:function(e){e.preventDefault();if(typeof(this.input.dom.files)=='undefined'||!this.input.dom.files.length){return;}this.addFiles(Array.prototype.slice.call(this.input.dom.files),false);},addFiles:function(A,B){var C=this.editorcore;
+if(!A.length){if(B){C.owner.fireEvent('editorevent',C.owner,false);C.owner.fireEvent('imageadd',C.owner,false);}return;}var f=A.pop();if(!f.type.match(/^image/)){this.addFiles(A,B);return;}var sn=this.selectedNode;var bl=sn&&this.editorcore.enableBlocks?Roo.htmleditor.Block.factory(sn):false;
+var D=new FileReader();D.addEventListener('load',(function(){if(bl){bl.image_src=D.result;bl.updateElement(sn);C.owner.fireEvent('editorevent',C.owner,false);C.owner.fireEvent('imageupdate',C.owner,sn);return;}if(this.editorcore.enableBlocks){var E=new Roo.htmleditor.BlockFigure({image_src:D.result,caption:'',caption_display:'none'}
+);C.insertAtCursor(E.toHTML());this.addFiles(A,true);return;}if(sn&&sn.tagName.toUpperCase()=='IMG'){sn.src=D.result;C.owner.fireEvent('editorevent',C.owner,false);C.owner.fireEvent('imageupdate',C.owner,sn);return;}C.insertAtCursor('<img src="'+D.result+'">');
+this.addFiles(A,true);}).createDelegate(this));D.readAsDataURL(f);},onBtnClick:function(id){this.editorcore.relayCmd(id);this.editorcore.focus();},onLinkClick:function(A){var B=this.selectedNode&&this.selectedNode.tagName.toUpperCase()=='A'?this.selectedNode.getAttribute('href'):'';
+Roo.bootstrap.MessageBox.show({title:"Add / Edit Link URL",msg:"Enter the URL for the link",buttons:Roo.bootstrap.MessageBox.OKCANCEL,minWidth:250,scope:this,prompt:true,multiline:false,modal:true,value:B,fn:function(C,D){if(C!='ok'){this.editorcore.focus();
 return;}if(B!=''){this.selectedNode.setAttribute('href',D);return;}if(D&&D.match(/http(s):\/\/.+/)){this.editorcore.relayCmd('createlink',D);}this.editorcore.focus();}});},updateToolbar:function(A,ev,B){if(!this.editorcore.activated){this.editor.onFirstFocus();
 return;}var C=this.buttons;var D=this.editorcore.doc;var E=false;C.each(function(e){if(e.enableToggle&&e.cmd){E=E||(['align-left','align-right','align-center','image','link','underline'].indexOf(e.btnid)<0&&D.queryCommandState(e.cmd));e.setActive(D.queryCommandState(e.cmd));
 }},this);if(ev&&(ev.type=='mouseup'||ev.type=='click')&&ev.target&&ev.target.tagName!='BODY'){B=ev.target;}var F=this.editorcore.getAllAncestors();if(!B){B=F.length?(F[0]?F[0]:F[1]):this.editorcore.doc.body;B=B?B:this.editorcore.doc.body;B=B.tagName.length?B:this.editorcore.doc.body;
@@ -1434,10 +1435,10 @@ return;}var C=this.buttons;var D=this.editorcore.doc;var E=false;C.each(function
 });var H=false;if(db&&this.editorcore.enableBlocks){H=Roo.htmleditor.Block.factory(db);if(H){db.className=(db.classList.length>0?db.className+' ':'')+' roo-ed-selection';B=this.selectedNode=db;}}var tn=B&&B.tagName.toUpperCase()||'';if(!H&&B&&tn!='A'){var I=B.closest('A');
 if(I){B=I;}}C.get('link').setActive(tn=='A'&&this.selectedNode.hasAttribute('href'));C.get('image').setActive(tn=='IMG'||this.editorcore.enableBlocks&&tn=='FIGURE');C.get('underline').setActive(tn=='U'||B.closest('u')?true:false);Roo.bootstrap.menu.Manager.hideAll();
 if(E||(tn.length&&tn=='BODY')){this.deleteBtn.hide();return;}this.deleteBtn.show();},onFirstFocus:function(){this.buttons.each(function(A){A.enable();});},onDelete:function(){var A=this.editorcore.createRange();var B=this.editorcore.getSelection();var sn=this.selectedNode;
-A.setStart(sn,0);A.setEnd(sn,0);if(sn.hasAttribute('data-block')){var C=Roo.htmleditor.Block.factory(this.selectedNode);if(C){sn=C.removeNode();sn.parentNode.removeChild(sn);B.removeAllRanges();B.addRange(A);this.updateToolbar(null,null,null);this.editorcore.fireEditorEvent(false);
-return;}}if(!sn){return;}if(sn&&sn.tagName=='BODY'){return;}var D=sn.childNodes[0]||sn.nextSibling||sn.previousSibling||sn.parentNode;a=new Roo.htmleditor.FilterKeepChildren({tag:false});a.replaceTag(sn);B.removeAllRanges();B.addRange(A);this.editorcore.fireEditorEvent(false);
-},toggleSourceEdit:function(A){if(A){Roo.log("disabling buttons");this.buttons.each(function(B){if(B.cmd!='pencil'){B.disable();}});}else{Roo.log("enabling buttons");if(this.editorcore.initialized){this.buttons.each(function(B){B.enable();});}}Roo.log("calling toggole on editor");
-this.editor.toggleSourceEdit(A);}});
+A.setStart(sn,0);A.setEnd(sn,0);if(sn.hasAttribute('data-block')){var C=Roo.htmleditor.Block.factory(this.selectedNode);if(C){sn=C.removeNode();sn.parentNode.removeChild(sn);B.removeAllRanges();B.addRange(A);this.updateToolbar(null,null,null);if(sn.tagName.toUpperCase()=='FIGURE'){this.editor.fireEvent('imagedelete',this.editor,sn);
+}this.selectedNode=false;this.editorcore.fireEditorEvent(false);return;}}if(!sn){return;}if(sn&&sn.tagName=='BODY'){return;}var D=sn.childNodes[0]||sn.nextSibling||sn.previousSibling||sn.parentNode;a=new Roo.htmleditor.FilterKeepChildren({tag:false});a.replaceTag(sn);
+B.removeAllRanges();B.addRange(A);if(sn.tagName.toUpperCase()=='IMG"'){this.editor.fireEvent('imagedelete',this.editor,sn);}this.selectedNode=false;this.editorcore.fireEditorEvent(false);},toggleSourceEdit:function(A){if(A){Roo.log("disabling buttons");this.buttons.each(function(B){if(B.cmd!='pencil'){B.disable();
+}});}else{Roo.log("enabling buttons");if(this.editorcore.initialized){this.buttons.each(function(B){B.enable();});}}Roo.log("calling toggole on editor");this.editor.toggleSourceEdit(A);}});
 // Roo/bootstrap/form/Markdown.js
 Roo.bootstrap.form.Markdown=function(A){Roo.bootstrap.form.Markdown.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.form.Markdown,Roo.bootstrap.form.TextArea,{editing:false,initEvents:function(){Roo.bootstrap.form.TextArea.prototype.initEvents.call(this);
 this.markdownEl=this.el.createChild({cls:'roo-markdown-area'});this.inputEl().addClass('d-none');if(this.getValue()==''){this.markdownEl.dom.innerHTML=String.format('<span class="roo-placeholder">{0}</span>',this.placeholder||'');}else{this.markdownEl.dom.innerHTML=Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));