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