git.roojs.org Git - roojs1/blob - Roo/bootstrap/form/HtmlEditorToolbarStandard.js

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