git.roojs.org Git - roojs1/blob - Roo/bootstrap/htmleditor/ToolbarStandard.js

   1
   2 Roo.namespace('Roo.bootstrap.htmleditor');
   3 /**
   4  * @class Roo.bootstrap.HtmlEditorToolbar1
   5  * Basic Toolbar
   6  *
   7  * @example
   8  * Usage:
   9  *
  10  new Roo.bootstrap.HtmlEditor({
  11     ....
  12     toolbars : [
  13         new Roo.bootstrap.HtmlEditorToolbar1({
  14             disable : { fonts: 1 , format: 1, ..., ... , ...],
  15             btns : [ .... ]
  16         })
  17     }
  18
  19  *
  20  * @cfg {Object} disable List of elements to disable..
  21  * @cfg {Array} btns List of additional buttons.
  22  *
  23  *
  24  * NEEDS Extra CSS?
  25  * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
  26  */
  27
  28 Roo.bootstrap.htmleditor.ToolbarStandard = function(config)
  29 {
  30
  31     Roo.apply(this, config);
  32
  33     // default disabled, based on 'good practice'..
  34     this.disable = this.disable || {};
  35     Roo.applyIf(this.disable, {
  36         fontSize : true,
  37         colors : true,
  38         specialElements : true
  39     });
  40     Roo.bootstrap.htmleditor.ToolbarStandard.superclass.constructor.call(this, config);
  41
  42     this.editor = config.editor;
  43     this.editorcore = config.editor.editorcore;
  44
  45     this.buttons   = new Roo.util.MixedCollection(false, function(o) { return o.cmd; });
  46
  47     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
  48     // dont call parent... till later.
  49 }
  50 Roo.extend(Roo.bootstrap.htmleditor.ToolbarStandard, Roo.bootstrap.NavSimplebar,  {
  51
  52     bar : true,
  53
  54     editor : false,
  55     editorcore : false,
  56
  57
  58     formats : [
  59         "p" ,
  60         "h1","h2","h3","h4","h5","h6",
  61         "pre", "code",
  62         "abbr", "acronym", "address", "cite", "samp", "var",
  63         'div','span'
  64     ],
  65
  66     onRender : function(ct, position)
  67     {
  68        // Roo.log("Call onRender: " + this.xtype);
  69
  70        Roo.bootstrap.htmleditor.ToolbarStandard.superclass.onRender.call(this, ct, position);
  71        Roo.log(this.el);
  72        this.el.dom.style.marginBottom = '0';
  73        var _this = this;
  74        var editorcore = this.editorcore;
  75        var editor= this.editor;
  76
  77        var children = [];
  78        var btn = function(id,cmd , toggle, handler, html){
  79
  80             var  event = toggle ? 'toggle' : 'click';
  81
  82             var a = {
  83                 size : 'sm',
  84                 xtype: 'Button',
  85                 xns: Roo.bootstrap,
  86                 //glyphicon : id,
  87                 fa: id,
  88                 cmd : id || cmd,
  89                 enableToggle:toggle !== false,
  90                 html : html || '',
  91                 pressed : toggle ? false : null,
  92                 listeners : {}
  93             };
  94             a.listeners[toggle ? 'toggle' : 'click'] = function() {
  95                 handler ? handler.call(_this,this) :_this.onBtnClick.call(_this, cmd ||  id);
  96             };
  97             children.push(a);
  98             return a;
  99        }
 100
 101     //    var cb_box = function...
 102
 103         var style = {
 104                 xtype: 'Button',
 105                 size : 'sm',
 106                 xns: Roo.bootstrap,
 107                 fa : 'font',
 108                 //html : 'submit'
 109                 menu : {
 110                     xtype: 'Menu',
 111                     xns: Roo.bootstrap,
 112                     items:  []
 113                 }
 114         };
 115         Roo.each(this.formats, function(f) {
 116             style.menu.items.push({
 117                 xtype :'MenuItem',
 118                 xns: Roo.bootstrap,
 119                 html : '<'+ f+' style="margin:2px">'+f +'</'+ f+'>',
 120                 tagname : f,
 121                 listeners : {
 122                     click : function()
 123                     {
 124                         editorcore.insertTag(this.tagname);
 125                         editor.focus();
 126                     }
 127                 }
 128
 129             });
 130         });
 131         children.push(style);
 132
 133         btn('bold',false,true);
 134         btn('italic',false,true);
 135         btn('align-left', 'justifyleft',true);
 136         btn('align-center', 'justifycenter',true);
 137         btn('align-right' , 'justifyright',true);
 138         btn('link', false, false, function(btn) {
 139             //Roo.log("create link?");
 140             var url = prompt(this.createLinkText, this.defaultLinkValue);
 141             if(url && url != 'http:/'+'/'){
 142                 this.editorcore.relayCmd('createlink', url);
 143             }
 144         }),
 145         btn('list','insertunorderedlist',true);
 146         btn('pencil', false,true, function(btn){
 147                 Roo.log(this);
 148                 this.toggleSourceEdit(btn.pressed);
 149         });
 150
 151         if (this.editor.btns.length > 0) {
 152             for (var i = 0; i<this.editor.btns.length; i++) {
 153                 children.push(this.editor.btns[i]);
 154             }
 155         }
 156
 157         /*
 158         var cog = {
 159                 xtype: 'Button',
 160                 size : 'sm',
 161                 xns: Roo.bootstrap,
 162                 glyphicon : 'cog',
 163                 //html : 'submit'
 164                 menu : {
 165                     xtype: 'Menu',
 166                     xns: Roo.bootstrap,
 167                     items:  []
 168                 }
 169         };
 170
 171         cog.menu.items.push({
 172             xtype :'MenuItem',
 173             xns: Roo.bootstrap,
 174             html : Clean styles,
 175             tagname : f,
 176             listeners : {
 177                 click : function()
 178                 {
 179                     editorcore.insertTag(this.tagname);
 180                     editor.focus();
 181                 }
 182             }
 183
 184         });
 185        */
 186
 187
 188        this.xtype = 'NavSimplebar';
 189
 190         for(var i=0;i< children.length;i++) {
 191
 192             this.buttons.add(this.addxtypeChild(children[i]));
 193
 194         }
 195
 196         editor.on('editorevent', this.updateToolbar, this);
 197     },
 198     onBtnClick : function(id)
 199     {
 200        this.editorcore.relayCmd(id);
 201        this.editorcore.focus();
 202     },
 203
 204     /**
 205      * Protected method that will not generally be called directly. It triggers
 206      * a toolbar update by reading the markup state of the current selection in the editor.
 207      */
 208     updateToolbar: function(){
 209
 210         if(!this.editorcore.activated){
 211             this.editor.onFirstFocus(); // is this neeed?
 212             return;
 213         }
 214
 215         var btns = this.buttons;
 216         var doc = this.editorcore.doc;
 217         btns.get('bold').setActive(doc.queryCommandState('bold'));
 218         btns.get('italic').setActive(doc.queryCommandState('italic'));
 219         //btns.get('underline').setActive(doc.queryCommandState('underline'));
 220
 221         btns.get('align-left').setActive(doc.queryCommandState('justifyleft'));
 222         btns.get('align-center').setActive(doc.queryCommandState('justifycenter'));
 223         btns.get('align-right').setActive(doc.queryCommandState('justifyright'));
 224
 225         //btns[frameId + '-insertorderedlist').setActive(doc.queryCommandState('insertorderedlist'));
 226         btns.get('list').setActive(doc.queryCommandState('insertunorderedlist'));
 227          /*
 228
 229         var ans = this.editorcore.getAllAncestors();
 230         if (this.formatCombo) {
 231
 232
 233             var store = this.formatCombo.store;
 234             this.formatCombo.setValue("");
 235             for (var i =0; i < ans.length;i++) {
 236                 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
 237                     // select it..
 238                     this.formatCombo.setValue(ans[i].tagName.toLowerCase());
 239                     break;
 240                 }
 241             }
 242         }
 243
 244
 245
 246         // hides menus... - so this cant be on a menu...
 247         Roo.bootstrap.MenuMgr.hideAll();
 248         */
 249         Roo.bootstrap.MenuMgr.hideAll();
 250         //this.editorsyncValue();
 251     },
 252     onFirstFocus: function() {
 253         this.buttons.each(function(item){
 254            item.enable();
 255         });
 256     },
 257     toggleSourceEdit : function(sourceEditMode){
 258
 259
 260         if(sourceEditMode){
 261             Roo.log("disabling buttons");
 262            this.buttons.each( function(item){
 263                 if(item.cmd != 'pencil'){
 264                     item.disable();
 265                 }
 266             });
 267
 268         }else{
 269             Roo.log("enabling buttons");
 270             if(this.editorcore.initialized){
 271                 this.buttons.each( function(item){
 272                     item.enable();
 273                 });
 274             }
 275
 276         }
 277         Roo.log("calling toggole on editor");
 278         // tell the editor that it's been pressed..
 279         this.editor.toggleSourceEdit(sourceEditMode);
 280
 281     }
 282 });
 283
 284
 285
 286