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