From: Alan <alan@roojs.com>
Date: Fri, 17 Feb 2023 06:29:21 +0000 (+0800)
Subject: Fix Image events
X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=2f1651bde56b00f4b9bfcefb26a7f2e8b0d5c4c8

Fix Image events
---

diff --git a/Roo/bootstrap/form/HtmlEditorToolbar/Standard.js b/Roo/bootstrap/form/HtmlEditorToolbar/Standard.js
index d2ea4e2676..72ccc6800b 100644
--- a/Roo/bootstrap/form/HtmlEditorToolbar/Standard.js
+++ b/Roo/bootstrap/form/HtmlEditorToolbar/Standard.js
@@ -221,19 +221,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;
         }
          
@@ -241,7 +248,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() {
@@ -261,9 +267,7 @@ 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.owner, false);
-                editor.owner.fireEvent('imageadd', editor.owner, false);
-                this.addFiles(far);
+                this.addFiles(far, true);
                 return;
             }
             // just a standard img..
@@ -274,9 +278,7 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbar.Standard, Roo.bootstrap.nav.Simp
                 return;
             }
             editor.insertAtCursor('<img src="' + reader.result +'">');
-            editor.owner.fireEvent('editorevent', editor.owner, false);
-            editor.owner.fireEvent('imageadd', editor.owner, false);
-            this.addFiles(far);
+            this.addFiles(far, true);
             
         }).createDelegate(this));
         reader.readAsDataURL(f);
@@ -442,6 +444,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;
             }   
@@ -461,6 +468,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);
         
         
diff --git a/Roo/form/HtmlEditor.js b/Roo/form/HtmlEditor.js
index ce3bcf48ab..de06645be9 100644
--- a/Roo/form/HtmlEditor.js
+++ b/Roo/form/HtmlEditor.js
@@ -222,18 +222,7 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
             * @param {Roo.HtmlEditorCore} this
             */
             paste: true,
-             /**
-            * @event imageadd
-            * Fires when on any editor when an image is added (excluding paste)
-            * @param {Roo.HtmlEditorCore} this
-            */
-           imageadd: true ,
-            /**
-            * @event imagedelete
-            * Fires when on any editor when an image is deleted
-            * @param {Roo.HtmlEditorCore} this
-            */
-           imagedelete: true  
+            
         });
         this.defaultAutoCreate =  {
             tag: "textarea",
diff --git a/docs/json/roodata.json b/docs/json/roodata.json
index 820212758c..e5929846a9 100644
--- a/docs/json/roodata.json
+++ b/docs/json/roodata.json
@@ -134413,7 +134413,7 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "HtmlEditor",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
             "desc" : "",
             "isOptional" : false
           }
@@ -134433,7 +134433,7 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "HtmlEditor",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
             "desc" : "",
             "isOptional" : false
           }
@@ -134493,7 +134493,7 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "HtmlEditor",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
             "desc" : "",
             "isOptional" : false
           },
@@ -134559,7 +134559,7 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "HtmlEditor",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
             "desc" : "",
             "isOptional" : false
           },
@@ -134671,7 +134671,7 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "HtmlEditor",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
             "desc" : "",
             "isOptional" : false
           },
@@ -134697,7 +134697,7 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "HtmlEditor",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
             "desc" : "",
             "isOptional" : false
           }
@@ -134737,7 +134737,7 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "HtmlEditor",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
             "desc" : "",
             "isOptional" : false
           }
@@ -134777,6 +134777,78 @@
         ],
         "returns" : []
       },
+      {
+        "name" : "imageadd",
+        "type" : "function",
+        "desc" : "Fires when on any editor when an image is added (excluding paste)",
+        "sig" : "function (_self)\n{\n\n}",
+        "memberOf" : "",
+        "example" : "",
+        "deprecated" : "",
+        "since" : "",
+        "see" : "",
+        "params" : [
+          {
+            "name" : "this",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
+            "desc" : "",
+            "isOptional" : false
+          }
+        ],
+        "returns" : []
+      },
+      {
+        "name" : "imagedelete",
+        "type" : "function",
+        "desc" : "Fires when on any editor when an image is deleted",
+        "sig" : "function (_self, img)\n{\n\n}",
+        "memberOf" : "",
+        "example" : "",
+        "deprecated" : "",
+        "since" : "",
+        "see" : "",
+        "params" : [
+          {
+            "name" : "this",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
+            "desc" : "",
+            "isOptional" : false
+          },
+          {
+            "name" : "img",
+            "type" : "HTMLElement",
+            "desc" : "could also be a figure if blocks are enabled",
+            "isOptional" : false
+          }
+        ],
+        "returns" : []
+      },
+      {
+        "name" : "imageupdated",
+        "type" : "function",
+        "desc" : "Fires when on any editor when an image is changed (excluding paste)",
+        "sig" : "function (_self, img)\n{\n\n}",
+        "memberOf" : "",
+        "example" : "",
+        "deprecated" : "",
+        "since" : "",
+        "see" : "",
+        "params" : [
+          {
+            "name" : "this",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
+            "desc" : "",
+            "isOptional" : false
+          },
+          {
+            "name" : "img",
+            "type" : "HTMLElement",
+            "desc" : "could also be a figure if blocks are enabled",
+            "isOptional" : false
+          }
+        ],
+        "returns" : []
+      },
       {
         "name" : "initialize",
         "type" : "function",
@@ -134790,7 +134862,7 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "HtmlEditor",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
             "desc" : "",
             "isOptional" : false
           }
@@ -134852,9 +134924,9 @@
       {
         "name" : "paste",
         "type" : "function",
-        "desc" : "Fires after the user pastes into input",
-        "sig" : "function (_self, e)\n{\n\n}",
-        "memberOf" : "Roo.bootstrap.form.Input",
+        "desc" : "Fires when press user pastes into the editor",
+        "sig" : "function (_self)\n{\n\n}",
+        "memberOf" : "",
         "example" : "",
         "deprecated" : "",
         "since" : "",
@@ -134862,15 +134934,9 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "Roo.form.Field",
+            "type" : "Roo.HtmlEditorCore",
             "desc" : "",
             "isOptional" : false
-          },
-          {
-            "name" : "e",
-            "type" : "Roo.EventObject",
-            "desc" : "The event Object",
-            "isOptional" : false
           }
         ],
         "returns" : []
@@ -134888,7 +134954,7 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "HtmlEditor",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
             "desc" : "",
             "isOptional" : false
           },
@@ -134934,7 +135000,7 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "HtmlEditor",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
             "desc" : "",
             "isOptional" : false
           }
@@ -134974,6 +135040,26 @@
         "params" : [],
         "returns" : []
       },
+      {
+        "name" : "stylesheetsclick",
+        "type" : "function",
+        "desc" : "Fires when press the Sytlesheets button",
+        "sig" : "function (_self)\n{\n\n}",
+        "memberOf" : "",
+        "example" : "",
+        "deprecated" : "",
+        "since" : "",
+        "see" : "",
+        "params" : [
+          {
+            "name" : "this",
+            "type" : "Roo.HtmlEditorCore",
+            "desc" : "",
+            "isOptional" : false
+          }
+        ],
+        "returns" : []
+      },
       {
         "name" : "sync",
         "type" : "function",
@@ -134987,7 +135073,7 @@
         "params" : [
           {
             "name" : "this",
-            "type" : "HtmlEditor",
+            "type" : "Roo.bootstrap.form.HtmlEditor",
             "desc" : "",
             "isOptional" : false
           },
diff --git a/docs/src/Roo_bootstrap_form_HtmlEditor.js.html b/docs/src/Roo_bootstrap_form_HtmlEditor.js.html
index 52dbdb53cf..653ba0127f 100644
--- a/docs/src/Roo_bootstrap_form_HtmlEditor.js.html
+++ b/docs/src/Roo_bootstrap_form_HtmlEditor.js.html
@@ -16,31 +16,26 @@
  */
 
 </span><span class="jsdoc-var">Roo.bootstrap.form.HtmlEditor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
-    </span><span class="jsdoc-var">Roo.bootstrap.form.HtmlEditor.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
-    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.toolbars</span><span class="jsdoc-syntax">) {
-        </span><span class="jsdoc-var">this.toolbars </span><span class="jsdoc-syntax">= [];
-    }
 
-    </span><span class="jsdoc-var">this.editorcore </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.HtmlEditorCore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">owner </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">} , </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">));
     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
             </span><span class="jsdoc-comment">/**
              * @event initialize
              * Fires when the editor is fully initialized (including the iframe)
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              */
             </span><span class="jsdoc-var">initialize</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-comment">/**
              * @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
              */
             </span><span class="jsdoc-var">activate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
              </span><span class="jsdoc-comment">/**
              * @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
              */
             </span><span class="jsdoc-var">beforesync</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
@@ -48,56 +43,95 @@
              * @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
              */
             </span><span class="jsdoc-var">beforepush</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
              </span><span class="jsdoc-comment">/**
              * @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
              */
             </span><span class="jsdoc-var">sync</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
              </span><span class="jsdoc-comment">/**
              * @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
              */
             </span><span class="jsdoc-var">push</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
              </span><span class="jsdoc-comment">/**
              * @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.
              */
             </span><span class="jsdoc-var">editmodechange</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-comment">/**
              * @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
              */
             </span><span class="jsdoc-var">editorevent</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-comment">/**
              * @event firstfocus
              * Fires when on first focus - needed by toolbars..
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              */
             </span><span class="jsdoc-var">firstfocus</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-comment">/**
              * @event autosave
              * Auto save the htmlEditor value as a file into Events
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              */
             </span><span class="jsdoc-var">autosave</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-comment">/**
              * @event savedpreview
              * preview the saved version of htmlEditor
-             * @param {HtmlEditor} this
+             * @param {Roo.bootstrap.form.HtmlEditor} this
              */
-            </span><span class="jsdoc-var">savedpreview</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
-        </span><span class="jsdoc-syntax">});
+            </span><span class="jsdoc-var">savedpreview</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+             </span><span class="jsdoc-comment">/**
+            * @event stylesheetsclick
+            * Fires when press the Sytlesheets button
+            * @param {Roo.HtmlEditorCore} this
+            */
+            </span><span class="jsdoc-var">stylesheetsclick</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-comment">/**
+            * @event paste
+            * Fires when press user pastes into the editor
+            * @param {Roo.HtmlEditorCore} this
+            */
+            </span><span class="jsdoc-var">paste</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-comment">/**
+            * @event imageadd
+            * Fires when on any editor when an image is added (excluding paste)
+            * @param {Roo.bootstrap.form.HtmlEditor} this
+            */
+           </span><span class="jsdoc-var">imageadd</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-comment">/**
+            * @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
+            */
+           </span><span class="jsdoc-var">imageupdate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">,
+           </span><span class="jsdoc-comment">/**
+            * @event imagedelete
+            * Fires when on any editor when an image is deleted
+            * @param {Roo.bootstrap.form.HtmlEditor} this
+            * @param {HTMLElement} img could also be a figure if blocks are enabled
+            */
+           </span><span class="jsdoc-var">imagedelete</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+    </span><span class="jsdoc-var">Roo.bootstrap.form.HtmlEditor.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.toolbars</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-var">this.toolbars </span><span class="jsdoc-syntax">= [];
+    }
+
+    </span><span class="jsdoc-var">this.editorcore </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.HtmlEditorCore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">owner </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">} , </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">));
+
 };
 
 
diff --git a/docs/src/Roo_bootstrap_form_HtmlEditorToolbar_Standard.js.html b/docs/src/Roo_bootstrap_form_HtmlEditorToolbar_Standard.js.html
index 7b28b6c9eb..21a44fd4e4 100644
--- a/docs/src/Roo_bootstrap_form_HtmlEditorToolbar_Standard.js.html
+++ b/docs/src/Roo_bootstrap_form_HtmlEditorToolbar_Standard.js.html
@@ -221,19 +221,26 @@
         }
 
 
-        </span><span class="jsdoc-var">this.addFiles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.input.dom.files</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-var">this.addFiles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.input.dom.files</span><span class="jsdoc-syntax">), </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
     },
 
-    </span><span class="jsdoc-var">addFiles </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">far</span><span class="jsdoc-syntax">) {
+    </span><span class="jsdoc-var">addFiles </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">far</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fire_add</span><span class="jsdoc-syntax">) {
+
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">editor </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">this.editorcore</span><span class="jsdoc-syntax">;
 
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">far.length</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fire_add</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">editor.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">editor.owner</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">editor.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'imageadd'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">editor.owner</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+            }
             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
         }
 
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">f </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">far.pop</span><span class="jsdoc-syntax">();
 
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">f.type.match</span><span class="jsdoc-syntax">(/^image/)) {
-            </span><span class="jsdoc-var">this.addFiles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">far</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.addFiles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">far</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fire_add</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
         }
 
@@ -241,7 +248,6 @@
 
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sn  </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.editorcore.enableBlocks </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">editor </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">this.editorcore</span><span class="jsdoc-syntax">;
 
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">reader </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">FileReader</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-var">reader.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'load'</span><span class="jsdoc-syntax">, (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
@@ -249,7 +255,8 @@
                 </span><span class="jsdoc-var">bl.image_src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">reader.result</span><span class="jsdoc-syntax">;
                 </span><span class="jsdoc-comment">//bl.caption = f.name;
                 </span><span class="jsdoc-var">bl.updateElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
-                </span><span class="jsdoc-var">editor.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">editor.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">editor.owner</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">editor.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'imageupdate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">editor.owner</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
                 </span><span class="jsdoc-comment">// we only do the first file!! and replace.
                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
             }
@@ -260,17 +267,18 @@
                     </span><span class="jsdoc-var">caption_display </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'none'  </span><span class="jsdoc-comment">//default to hide captions..
                  </span><span class="jsdoc-syntax">});
                 </span><span class="jsdoc-var">editor.insertAtCursor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fig.toHTML</span><span class="jsdoc-syntax">());
-                </span><span class="jsdoc-var">editor.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.addFiles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">far</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
             }
             </span><span class="jsdoc-comment">// just a standard img..
             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">sn.tagName.toUpperCase</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-string">'IMG'</span><span class="jsdoc-syntax">) {
                 </span><span class="jsdoc-var">sn.src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">reader.result</span><span class="jsdoc-syntax">;
-                </span><span class="jsdoc-var">editor.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">editor.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">editor.owner</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">editor.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'imageupdate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">editor.owner</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
             }
             </span><span class="jsdoc-var">editor.insertAtCursor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'&lt;img src=&quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">reader.result </span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'&quot;&gt;'</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-var">editor.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.addFiles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">far</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 
         })</span><span class="jsdoc-var">.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">));
         </span><span class="jsdoc-var">reader.readAsDataURL</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">);
@@ -436,6 +444,11 @@
                 </span><span class="jsdoc-var">selection.removeAllRanges</span><span class="jsdoc-syntax">();
                 </span><span class="jsdoc-var">selection.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">);
                 </span><span class="jsdoc-var">this.updateToolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn.tagName.toUpperCase</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-string">'FIGURE'</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-var">this.editor.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'imagedelete'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
+                }
+
+                </span><span class="jsdoc-var">this.selectedNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
                 </span><span class="jsdoc-var">this.editorcore.fireEditorEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
             }
@@ -455,6 +468,11 @@
 
         </span><span class="jsdoc-var">selection.removeAllRanges</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-var">selection.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn.tagName.toUpperCase</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-string">'IMG&quot;'</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.editor.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'imagedelete'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-var">this.selectedNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
         </span><span class="jsdoc-var">this.editorcore.fireEditorEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 
 
diff --git a/docs/src/Roo_form_HtmlEditor.js.html b/docs/src/Roo_form_HtmlEditor.js.html
index 98dc47cfa0..7e651fcd0a 100644
--- a/docs/src/Roo_form_HtmlEditor.js.html
+++ b/docs/src/Roo_form_HtmlEditor.js.html
@@ -221,8 +221,9 @@
             * Fires when press user pastes into the editor
             * @param {Roo.HtmlEditorCore} this
             */
-            </span><span class="jsdoc-var">paste</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
-        </span><span class="jsdoc-syntax">});
+            </span><span class="jsdoc-var">paste</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+
+        });
         </span><span class="jsdoc-var">this.defaultAutoCreate </span><span class="jsdoc-syntax">=  {
             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;textarea&quot;</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'width: ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px;height: ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px;'</span><span class="jsdoc-syntax">,
diff --git a/docs/symbols/Roo.bootstrap.form.HtmlEditor.json b/docs/symbols/Roo.bootstrap.form.HtmlEditor.json
index 52eafc17a1..ffaf9ea289 100644
--- a/docs/symbols/Roo.bootstrap.form.HtmlEditor.json
+++ b/docs/symbols/Roo.bootstrap.form.HtmlEditor.json
@@ -1746,7 +1746,7 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "HtmlEditor",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
           "desc" : "",
           "isOptional" : false
         },
@@ -1772,7 +1772,7 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "HtmlEditor",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
           "desc" : "",
           "isOptional" : false
         },
@@ -1798,6 +1798,26 @@
       "params" : [],
       "returns" : []
     },
+    {
+      "name" : "stylesheetsclick",
+      "type" : "function",
+      "desc" : "Fires when press the Sytlesheets button",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.HtmlEditorCore",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
     {
       "name" : "initialize",
       "type" : "function",
@@ -1811,7 +1831,7 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "HtmlEditor",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
           "desc" : "",
           "isOptional" : false
         }
@@ -1870,7 +1890,27 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "HtmlEditor",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "imageadd",
+      "type" : "function",
+      "desc" : "Fires when on any editor when an image is added (excluding paste)",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
           "desc" : "",
           "isOptional" : false
         }
@@ -1890,7 +1930,7 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "HtmlEditor",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
           "desc" : "",
           "isOptional" : false
         }
@@ -1910,7 +1950,7 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "HtmlEditor",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
           "desc" : "",
           "isOptional" : false
         },
@@ -1923,6 +1963,32 @@
       ],
       "returns" : []
     },
+    {
+      "name" : "imagedelete",
+      "type" : "function",
+      "desc" : "Fires when on any editor when an image is deleted",
+      "sig" : "function (_self, img)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "img",
+          "type" : "HTMLElement",
+          "desc" : "could also be a figure if blocks are enabled",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
     {
       "name" : "beforesync",
       "type" : "function",
@@ -1936,7 +2002,7 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "HtmlEditor",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
           "desc" : "",
           "isOptional" : false
         },
@@ -1962,7 +2028,7 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "HtmlEditor",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
           "desc" : "",
           "isOptional" : false
         }
@@ -1970,10 +2036,10 @@
       "returns" : []
     },
     {
-      "name" : "savedpreview",
+      "name" : "imageupdated",
       "type" : "function",
-      "desc" : "preview the saved version of htmlEditor",
-      "sig" : "function (_self)\n{\n\n}",
+      "desc" : "Fires when on any editor when an image is changed (excluding paste)",
+      "sig" : "function (_self, img)\n{\n\n}",
       "memberOf" : "",
       "example" : "",
       "deprecated" : "",
@@ -1982,18 +2048,24 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "HtmlEditor",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
           "desc" : "",
           "isOptional" : false
+        },
+        {
+          "name" : "img",
+          "type" : "HTMLElement",
+          "desc" : "could also be a figure if blocks are enabled",
+          "isOptional" : false
         }
       ],
       "returns" : []
     },
     {
-      "name" : "push",
+      "name" : "savedpreview",
       "type" : "function",
-      "desc" : "Fires when the iframe editor is updated with content from the textarea.",
-      "sig" : "function (_self, html)\n{\n\n}",
+      "desc" : "preview the saved version of htmlEditor",
+      "sig" : "function (_self)\n{\n\n}",
       "memberOf" : "",
       "example" : "",
       "deprecated" : "",
@@ -2002,13 +2074,7 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "HtmlEditor",
-          "desc" : "",
-          "isOptional" : false
-        },
-        {
-          "name" : "html",
-          "type" : "String",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
           "desc" : "",
           "isOptional" : false
         }
@@ -2016,9 +2082,9 @@
       "returns" : []
     },
     {
-      "name" : "autosave",
+      "name" : "paste",
       "type" : "function",
-      "desc" : "Auto save the htmlEditor value as a file into Events",
+      "desc" : "Fires when press user pastes into the editor",
       "sig" : "function (_self)\n{\n\n}",
       "memberOf" : "",
       "example" : "",
@@ -2028,7 +2094,7 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "HtmlEditor",
+          "type" : "Roo.HtmlEditorCore",
           "desc" : "",
           "isOptional" : false
         }
@@ -2036,11 +2102,11 @@
       "returns" : []
     },
     {
-      "name" : "paste",
+      "name" : "push",
       "type" : "function",
-      "desc" : "Fires after the user pastes into input",
-      "sig" : "function (_self, e)\n{\n\n}",
-      "memberOf" : "Roo.bootstrap.form.Input",
+      "desc" : "Fires when the iframe editor is updated with content from the textarea.",
+      "sig" : "function (_self, html)\n{\n\n}",
+      "memberOf" : "",
       "example" : "",
       "deprecated" : "",
       "since" : "",
@@ -2048,14 +2114,34 @@
       "params" : [
         {
           "name" : "this",
-          "type" : "Roo.form.Field",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
           "desc" : "",
           "isOptional" : false
         },
         {
-          "name" : "e",
-          "type" : "Roo.EventObject",
-          "desc" : "The event Object",
+          "name" : "html",
+          "type" : "String",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : []
+    },
+    {
+      "name" : "autosave",
+      "type" : "function",
+      "desc" : "Auto save the htmlEditor value as a file into Events",
+      "sig" : "function (_self)\n{\n\n}",
+      "memberOf" : "",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.bootstrap.form.HtmlEditor",
+          "desc" : "",
           "isOptional" : false
         }
       ],
diff --git a/examples/bootstrap/Editor.js b/examples/bootstrap/Editor.js
index 537273182b..9dde1eb917 100644
--- a/examples/bootstrap/Editor.js
+++ b/examples/bootstrap/Editor.js
@@ -63,6 +63,15 @@ Roo.example.Editor = new Roo.XComponent({
                                                 render : function (_self)
                                                 {
                                                     _this.previewPanel = _self;
+                                                },
+                                                imageadd : function(a) {
+                                                    Roo.log(['imageadd', a])
+                                                },
+                                                imageupdate : function(a,b) {
+                                                    Roo.log(['imageupdate', a,b])
+                                                },
+                                                imagedelete : function(a,b) {
+                                                    Roo.log(['imagedelete', a,b])
                                                 }
                                             }
                                         }
diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
index f42a03b9e5..6fbd580460 100644
--- a/roojs-ui-debug.js
+++ b/roojs-ui-debug.js
@@ -27334,7 +27334,19 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
             * Fires when press user pastes into the editor
             * @param {Roo.HtmlEditorCore} this
             */
-            paste: true 
+            paste: true,
+             /**
+            * @event imageadd
+            * Fires when on any editor when an image is added (excluding paste)
+            * @param {Roo.HtmlEditorCore} this
+            */
+           imageadd: true ,
+            /**
+            * @event imagedelete
+            * Fires when on any editor when an image is deleted
+            * @param {Roo.HtmlEditorCore} this
+            */
+           imagedelete: true  
         });
         this.defaultAutoCreate =  {
             tag: "textarea",
diff --git a/roojs-ui.js b/roojs-ui.js
index 74c0a88979..e07413e015 100644
--- a/roojs-ui.js
+++ b/roojs-ui.js
@@ -1197,10 +1197,10 @@ Roo.HtmlEditorCore.tag_remove=['FONT','TBODY'];Roo.HtmlEditorCore.ablack=['on'];
 
 // Roo/form/HtmlEditor.js
 Roo.form.HtmlEditor=function(A){Roo.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.form.HtmlEditor,Roo.form.Field,{clearUp:true,toolbars:false,resizable:false,height:300,width:500,stylesheets:false,cblack:false,cwhite:false,black:false,white:false,allowComments:false,enableBlocks:true,autoClean:true,bodyCls:'',language:'en',frameId:false,validationEvent:false,deferHeight:true,initialized:false,activated:false,onFocus:Roo.emptyFn,iframePad:3,hideMode:'offsets',actionMode:'container',defaultAutoCreate:{tag:"textarea",style:"width:500px;height:300px;",autocomplete:"new-password"}
-,initComponent:function(){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});this.defaultAutoCreate={tag:"textarea",style:'width: '+this.width+'px;height: '+this.height+'px;',autocomplete:"new-password"}
-;},createToolbar:function(A){Roo.log("create toolbars");if(!A.toolbars||!A.toolbars.length){A.toolbars=[new Roo.form.HtmlEditor.ToolbarStandard()];}for(var i=0;i<A.toolbars.length;i++){A.toolbars[i]=Roo.factory(typeof(A.toolbars[i])=='string'?{xtype:A.toolbars[i]}
-:A.toolbars[i],Roo.form.HtmlEditor);A.toolbars[i].init(A);}},getSelectedNode:function(){if(this.toolbars.length<2||!this.toolbars[1].tb){return false;}return this.toolbars[1].tb.selectedNode;},onRender:function(ct,A){var _t=this;Roo.form.HtmlEditor.superclass.onRender.call(this,ct,A);
-this.wrap=this.el.wrap({cls:'x-html-editor-wrap',cn:{cls:'x-html-editor-tb'}});this.editorcore.onRender(ct,A);if(this.resizable){this.resizeEl=new Roo.Resizable(this.wrap,{pinned:true,wrap:true,dynamic:true,minHeight:this.height,height:this.height,handles:this.resizable,width:this.width,listeners:{resize:function(r,w,h){_t.onResize(w,h);
+,initComponent:function(){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}
+);this.defaultAutoCreate={tag:"textarea",style:'width: '+this.width+'px;height: '+this.height+'px;',autocomplete:"new-password"};},createToolbar:function(A){Roo.log("create toolbars");if(!A.toolbars||!A.toolbars.length){A.toolbars=[new Roo.form.HtmlEditor.ToolbarStandard()];
+}for(var i=0;i<A.toolbars.length;i++){A.toolbars[i]=Roo.factory(typeof(A.toolbars[i])=='string'?{xtype:A.toolbars[i]}:A.toolbars[i],Roo.form.HtmlEditor);A.toolbars[i].init(A);}},getSelectedNode:function(){if(this.toolbars.length<2||!this.toolbars[1].tb){return false;
+}return this.toolbars[1].tb.selectedNode;},onRender:function(ct,A){var _t=this;Roo.form.HtmlEditor.superclass.onRender.call(this,ct,A);this.wrap=this.el.wrap({cls:'x-html-editor-wrap',cn:{cls:'x-html-editor-tb'}});this.editorcore.onRender(ct,A);if(this.resizable){this.resizeEl=new Roo.Resizable(this.wrap,{pinned:true,wrap:true,dynamic:true,minHeight:this.height,height:this.height,handles:this.resizable,width:this.width,listeners:{resize:function(r,w,h){_t.onResize(w,h);
 }}});}this.createToolbar(this);if(!this.width){this.setSize(this.wrap.getSize());}if(this.resizeEl){this.resizeEl.resizeTo.defer(100,this.resizeEl,[this.width,this.height]);}this.keyNav=new Roo.KeyNav(this.el,{"tab":function(e){e.preventDefault();var B=this.getValue();
 var C=this.el.dom.selectionStart;var D=this.el.dom.selectionEnd;if(!e.shiftKey){this.setValue(B.substring(0,C)+"\t"+B.substring(D));this.el.dom.setSelectionRange(D+1,D+1);return;}var f=B.substring(0,C).split("\t");if(f.pop().length!=0){return;}this.setValue(f.join("\t")+B.substring(D));
 this.el.dom.setSelectionRange(C-1,C-1);},"home":function(e){e.preventDefault();var B=this.el.dom.selectionStart;var C=this.getValue().split("\n");if(!C.length){return;}if(e.ctrlKey){this.el.dom.setSelectionRange(0,0);return;}var D=0;for(var i=0;i<C.length;