fix dialog on htmleditor link
[roojs1] / Roo / form / HtmlEditor / ToolbarStandard.js
index 46958a6..b58a4cf 100644 (file)
@@ -1,4 +1,3 @@
-// <script type="text/javascript">
 /*
  * Based on
  * Ext JS Library 1.1.1
@@ -8,9 +7,9 @@
  */
 
 /**
- * @class Roo.form.HtmlEditorToolbar1
+ * @class Roo.form.HtmlEditor.ToolbarStandard
  * Basic Toolbar
- * 
+
  * Usage:
  *
  new Roo.form.HtmlEditor({
@@ -24,7 +23,7 @@
      
  * 
  * @cfg {Object} disable List of elements to disable..
- * @cfg {Array} btns List of additional buttons.
+ * @cfg {Roo.Toolbar.Item|Roo.Toolbar.Button|Roo.Toolbar.SplitButton|Roo.form.Field} btns[] List of additional buttons.
  * 
  * 
  * NEEDS Extra CSS? 
@@ -49,18 +48,31 @@ Roo.form.HtmlEditor.ToolbarStandard = function(config)
     // dont call parent... till later.
 }
 
-Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
+Roo.form.HtmlEditor.ToolbarStandard.prototype = {
     
     tb: false,
     
     rendered: false,
     
     editor : false,
+    editorcore : false,
     /**
      * @cfg {Object} disable  List of toolbar elements to disable
          
      */
     disable : false,
+    
+    
+     /**
+     * @cfg {String} createLinkText The default text for the create link prompt
+     */
+    createLinkText : 'Please enter the URL for the link:',
+    /**
+     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+     */
+    defaultLinkValue : 'http:/'+'/',
+   
+    
       /**
      * @cfg {Array} fontFamilies An array of available font families
      */
@@ -119,7 +131,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
         ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"], 
         ["pre"],[ "code"], 
         ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
-        ['div'],['span']
+        ['div'],['span'],
+        ['sup'],['sub']
     ],
     
     cleanStyles : [
@@ -138,9 +151,12 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
     init : function(editor)
     {
         this.editor = editor;
+        this.editorcore = editor.editorcore ? editor.editorcore : editor;
+        var editorcore = this.editorcore;
         
+        var _t = this;
         
-        var fid = editor.frameId;
+        var fid = editorcore.frameId;
         var etb = this;
         function btn(id, toggle, handler){
             var xid = fid + '-'+ id ;
@@ -149,8 +165,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                 cmd : id,
                 cls : 'x-btn-icon x-edit-'+id,
                 enableToggle:toggle !== false,
-                scope: editor, // was editor...
-                handler:handler||editor.relayBtnCmd,
+                scope: _t, // was editor...
+                handler:handler||_t.relayBtnCmd,
                 clickEvent:'mousedown',
                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
                 tabIndex:-1
@@ -208,7 +224,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                 width:135,
                 listeners : {
                     'select': function(c, r, i) {
-                        editor.insertTag(r.get('tag'));
+                        editorcore.insertTag(r.get('tag'));
                         editor.focus();
                     }
                 }
@@ -222,7 +238,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
             tb.add(
                 btn('bold'),
                 btn('italic'),
-                btn('underline')
+                btn('underline'),
+                btn('strikethrough')
             );
         };
         if(!this.disable.fontSize){
@@ -230,8 +247,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                 '-',
                 
                 
-                btn('increasefontsize', false, editor.adjustFont),
-                btn('decreasefontsize', false, editor.adjustFont)
+                btn('increasefontsize', false, editorcore.adjustFont),
+                btn('decreasefontsize', false, editorcore.adjustFont)
             );
         };
         
@@ -239,7 +256,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
         if(!this.disable.colors){
             tb.add(
                 '-', {
-                    id:editor.frameId +'-forecolor',
+                    id:editorcore.frameId +'-forecolor',
                     cls:'x-btn-icon x-edit-forecolor',
                     clickEvent:'mousedown',
                     tooltip: this.buttonTips['forecolor'] || undefined,
@@ -250,14 +267,14 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                         value:'000000',
                         plain:true,
                         selectHandler: function(cp, color){
-                            editor.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
+                            editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
                             editor.deferFocus();
                         },
-                        scope: editor,
+                        scope: editorcore,
                         clickEvent:'mousedown'
                     })
                 }, {
-                    id:editor.frameId +'backcolor',
+                    id:editorcore.frameId +'backcolor',
                     cls:'x-btn-icon x-edit-backcolor',
                     clickEvent:'mousedown',
                     tooltip: this.buttonTips['backcolor'] || undefined,
@@ -269,17 +286,17 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                         allowReselect: true,
                         selectHandler: function(cp, color){
                             if(Roo.isGecko){
-                                editor.execCmd('useCSS', false);
-                                editor.execCmd('hilitecolor', color);
-                                editor.execCmd('useCSS', true);
+                                editorcore.execCmd('useCSS', false);
+                                editorcore.execCmd('hilitecolor', color);
+                                editorcore.execCmd('useCSS', true);
                                 editor.deferFocus();
                             }else{
-                                editor.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor', 
+                                editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor', 
                                     Roo.isSafari || Roo.isIE ? '#'+color : color);
                                 editor.deferFocus();
                             }
                         },
-                        scope:editor,
+                        scope:editorcore,
                         clickEvent:'mousedown'
                     })
                 }
@@ -301,7 +318,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
             if(!this.disable.links){
                 tb.add(
                     '-',
-                    btn('createlink', false, editor.createLink)    /// MOVE TO HERE?!!?!?!?!
+                    btn('createlink', false, this.createLink)    /// MOVE TO HERE?!!?!?!?!
                 );
             };
 
@@ -338,7 +355,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                     
                     html: this.specialChars[i],
                     handler: function(a,b) {
-                        editor.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
+                        editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
                         //editor.insertAtCursor(a.html);
                         
                     },
@@ -363,18 +380,78 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
             };
             for (var i =0; i < this.cleanStyles.length; i++) {
                 cmenu.menu.items.push({
-                    
-                    html: 'Remove' + this.cleanStyles[i],
+                    actiontype : this.cleanStyles[i],
+                    html: 'Remove ' + this.cleanStyles[i],
                     handler: function(a,b) {
-                        var c = Roo.get(editor.doc.body);
+//                        Roo.log(a);
+//                        Roo.log(b);
+                        var c = Roo.get(editorcore.doc.body);
                         c.select('[style]').each(function(s) {
-                            s.dom.style.removeProperty(a.html);
+                            s.dom.style.removeProperty(a.actiontype);
                         });
-                        
+                        editorcore.syncValue();
                     },
                     tabIndex:-1
                 });
             }
+            cmenu.menu.items.push({
+                actiontype : 'tablewidths',
+                html: 'Remove Table Widths',
+                handler: function(a,b) {
+                    editorcore.cleanTableWidths();
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            cmenu.menu.items.push({
+                actiontype : 'word',
+                html: 'Remove MS Word Formating',
+                handler: function(a,b) {
+                    editorcore.cleanWord();
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
+            cmenu.menu.items.push({
+                actiontype : 'all',
+                html: 'Remove All Styles',
+                handler: function(a,b) {
+                    
+                    var c = Roo.get(editorcore.doc.body);
+                    c.select('[style]').each(function(s) {
+                        s.dom.removeAttribute('style');
+                    });
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
+            cmenu.menu.items.push({
+                actiontype : 'all',
+                html: 'Remove All CSS Classes',
+                handler: function(a,b) {
+                    
+                    var c = Roo.get(editorcore.doc.body);
+                    c.select('[class]').each(function(s) {
+                        s.dom.removeAttribute('class');
+                    });
+                    editorcore.cleanWord();
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
+             cmenu.menu.items.push({
+                actiontype : 'tidy',
+                html: 'Tidy HTML Source',
+                handler: function(a,b) {
+                    new Roo.htmleditor.Tidy(editorcore.doc.body);
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
             
             tb.add(cmenu);
         }
@@ -406,9 +483,14 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
         
         if (this.btns) {
             for(var i =0; i< this.btns.length;i++) {
-                var b = Roo.factory(this.btns[i],Roo.form);
+                var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
                 b.cls =  'x-edit-none';
-                b.scope = editor;
+                
+                if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
+                    b.cls += ' x-init-enable';
+                }
+                
+                b.scope = editorcore;
                 tb.add(b);
             }
         
@@ -419,7 +501,12 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
         // disable everything...
         
         this.tb.items.each(function(item){
-           if(item.id != editor.frameId+ '-sourceedit'){
+            
+           if(
+                item.id != editorcore.frameId+ '-sourceedit' && 
+                (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
+            ){
+                
                 item.disable();
             }
         });
@@ -432,6 +519,52 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
     },
     
     
+    relayBtnCmd : function(btn) {
+        this.editorcore.relayCmd(btn.cmd);
+    },
+    // private used internally
+    createLink : function(){
+        //Roo.log("create link?");
+        var ec = this.editorcore;
+        var ar = ec.getAllAncestors();
+        var n = false;
+        for(var i = 0;i< ar.length;i++) {
+            if (ar[i] && ar[i].nodeName == 'A') {
+                n = ar[i];
+                break;
+            }
+        }
+        
+        (function() {
+            
+            Roo.MessageBox.show({
+                title : "Add / Edit Link URL",
+                msg : "Enter the url for the link",
+                buttons: Roo.MessageBox.OKCANCEL,
+                fn: function(btn, url){
+                    if (btn != 'ok') {
+                        return;
+                    }
+                    if(url && url != 'http:/'+'/'){
+                        if (n) {
+                            n.setAttribute('href', url);
+                        } else {
+                            ec.relayCmd('createlink', url);
+                        }
+                    }
+                },
+                minWidth:250,
+                prompt:true,
+                //multiline: multiline,
+                modal : true,
+                value :  n  ? n.getAttribute('href') : '' 
+            });
+            
+             
+        }).defer(100, this); // we have to defer this , otherwise the mouse click gives focus to the main window.
+        
+    },
+
     
     /**
      * Protected method that will not generally be called directly. It triggers
@@ -439,14 +572,14 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
      */
     updateToolbar: function(){
 
-        if(!this.editor.activated){
+        if(!this.editorcore.activated){
             this.editor.onFirstFocus();
             return;
         }
 
         var btns = this.tb.items.map, 
-            doc = this.editor.doc,
-            frameId = this.editor.frameId;
+            doc = this.editorcore.doc,
+            frameId = this.editorcore.frameId;
 
         if(!this.disable.font && !Roo.isSafari){
             /*
@@ -460,6 +593,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
             btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
             btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
             btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
+            btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
         }
         if(!this.disable.alignments){
             btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
@@ -471,7 +605,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
             btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
         }
         
-        var ans = this.editor.getAllAncestors();
+        var ans = this.editorcore.getAllAncestors();
         if (this.formatCombo) {
             
             
@@ -514,32 +648,42 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
     },
     
     toggleSourceEdit : function(sourceEditMode){
+        
+        Roo.log("toolbar toogle");
         if(sourceEditMode === undefined){
             sourceEditMode = !this.sourceEditMode;
         }
         this.sourceEditMode = sourceEditMode === true;
-        var btn = this.tb.items.get(this.editor.frameId +'-sourceedit');
+        var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
         // just toggle the button?
-        if(btn.pressed !== this.editor.sourceEditMode){
-            btn.toggle(this.editor.sourceEditMode);
+        if(btn.pressed !== this.sourceEditMode){
+            btn.toggle(this.sourceEditMode);
             return;
         }
         
-        if(this.sourceEditMode){
+        if(sourceEditMode){
+            Roo.log("disabling buttons");
             this.tb.items.each(function(item){
-                if(item.cmd != 'sourceedit'){
+                if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
                     item.disable();
                 }
             });
           
         }else{
-            if(this.initialized){
+            Roo.log("enabling buttons");
+            if(this.editorcore.initialized){
                 this.tb.items.each(function(item){
                     item.enable();
                 });
+                // initialize 'blocks'
+                Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
+                    Roo.htmleditor.Block.factory(e).updateElement(e);
+                },this);
+            
             }
             
         }
+        Roo.log("calling toggole on editor");
         // tell the editor that it's been pressed..
         this.editor.toggleSourceEdit(sourceEditMode);
        
@@ -580,6 +724,11 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
             text: 'Underline the selected text.',
             cls: 'x-html-editor-tip'
         },
+        strikethrough : {
+            title: 'Strikethrough',
+            text: 'Strikethrough the selected text.',
+            cls: 'x-html-editor-tip'
+        },
         increasefontsize : {
             title: 'Grow Text',
             text: 'Increase the font size.',
@@ -657,7 +806,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
            item.enable();
         });
     }
-});
+};