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

   1
   2 /**
   3  * @class Roo.bootstrap.form.HtmlEditorToolbar.Standard
   4  * @parent Roo.bootstrap.form.HtmlEditor
   5  * @extends Roo.bootstrap.nav.Simplebar
   6  * Basic Toolbar
   7  *
   8  * @example
   9  * Usage:
  10  *
  11  new Roo.bootstrap.form.HtmlEditor({
  12     ....
  13     toolbars : [
  14         new Roo.bootstrap.form.HtmlEditorToolbar.Standard({
  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.form.HtmlEditorToolbar.Standard = 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.form.HtmlEditorToolbar.Standard.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.form.HtmlEditorToolbar.Standard, 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
  68     deleteBtn: false,
  69
  70     onRender : function(ct, position)
  71     {
  72        // Roo.log("Call onRender: " + this.xtype);
  73
  74        Roo.bootstrap.form.HtmlEditorToolbar.Standard.superclass.onRender.call(this, ct, position);
  75        Roo.log(this.el);
  76        this.el.dom.style.marginBottom = '0';
  77        var _this = this;
  78        var editorcore = this.editorcore;
  79        var editor= this.editor;
  80
  81        var children = [];
  82        var btn = function(id,cmd , toggle, handler, html){
  83
  84             var  event = toggle ? 'toggle' : 'click';
  85
  86             var a = {
  87                 size : 'sm',
  88                 xtype: 'Button',
  89                 xns: Roo.bootstrap,
  90                 //glyphicon : id,
  91                 fa: id,
  92                 cmd : id || cmd,
  93                 enableToggle:toggle !== false,
  94                 html : html || '',
  95                 pressed : toggle ? false : null,
  96                 listeners : {}
  97             };
  98             a.listeners[toggle ? 'toggle' : 'click'] = function() {
  99                 handler ? handler.call(_this,this) :_this.onBtnClick.call(_this, cmd ||  id);
 100             };
 101             children.push(a);
 102             return a;
 103        }
 104
 105     //    var cb_box = function...
 106
 107         var style = {
 108                 xtype: 'Button',
 109                 size : 'sm',
 110                 xns: Roo.bootstrap,
 111                 fa : 'font',
 112                 //html : 'submit'
 113                 menu : {
 114                     xtype: 'Menu',
 115                     xns: Roo.bootstrap,
 116                     items:  []
 117                 }
 118         };
 119         Roo.each(this.formats, function(f) {
 120             style.menu.items.push({
 121                 xtype :'MenuItem',
 122                 xns: Roo.bootstrap,
 123                 html : '<'+ f+' style="margin:2px">'+f +'</'+ f+'>',
 124                 tagname : f,
 125                 listeners : {
 126                     click : function()
 127                     {
 128                         editorcore.insertTag(this.tagname);
 129                         editor.focus();
 130                     }
 131                 }
 132
 133             });
 134         });
 135         children.push(style);
 136
 137         btn('bold',false,true);
 138         btn('italic',false,true);
 139         btn('align-left', 'justifyleft',true);
 140         btn('align-center', 'justifycenter',true);
 141         btn('align-right' , 'justifyright',true);
 142         btn('link', false, false, function(btn) {
 143             //Roo.log("create link?");
 144             var url = prompt(this.createLinkText, this.defaultLinkValue);
 145             if(url && url != 'http:/'+'/'){
 146                 this.editorcore.relayCmd('createlink', url);
 147             }
 148         }),
 149         btn('list','insertunorderedlist',true);
 150         btn('list-ol','insertorderedlist',true);
 151
 152         btn('pencil', false,true, function(btn){
 153                 Roo.log(this);
 154                 this.toggleSourceEdit(btn.pressed);
 155         });
 156
 157         if (this.editor.btns.length > 0) {
 158             for (var i = 0; i<this.editor.btns.length; i++) {
 159                 children.push(this.editor.btns[i]);
 160             }
 161         }
 162
 163
 164
 165
 166        this.xtype = 'NavSimplebar';
 167
 168         for(var i=0;i< children.length;i++) {
 169
 170             this.buttons.add(this.addxtypeChild(children[i]));
 171
 172         }
 173
 174         editor.on('editorevent', this.updateToolbar, this);
 175     },
 176
 177     buildToolbarDelete : function()
 178     {
 179
 180         this.addxtypeChild({
 181             xtype : 'Element',
 182             xns : Roo.bootstrap,
 183             cls : 'roo-htmleditor-fill'
 184         });
 185
 186         this.deleteBtn = this.addxtypeChild({
 187             size : 'sm',
 188             xtype: 'Button',
 189             xns: Roo.bootstrap,
 190             fa: 'trash',
 191             listeners : {
 192                 click : this.onDelete.createDelegate(this)
 193             }
 194         });
 195         this.deleteBtn.hide();
 196
 197     },
 198
 199
 200     onBtnClick : function(id)
 201     {
 202        this.editorcore.relayCmd(id);
 203        this.editorcore.focus();
 204     },
 205
 206     /**
 207      * Protected method that will not generally be called directly. It triggers
 208      * a toolbar update by reading the markup state of the current selection in the editor.
 209      */
 210     updateToolbar: function(editor ,ev, sel){
 211
 212         if(!this.editorcore.activated){
 213             this.editor.onFirstFocus(); // is this neeed?
 214             return;
 215         }
 216
 217         var btns = this.buttons;
 218         var doc = this.editorcore.doc;
 219         btns.get('bold').setActive(doc.queryCommandState('bold'));
 220         btns.get('italic').setActive(doc.queryCommandState('italic'));
 221         //btns.get('underline').setActive(doc.queryCommandState('underline'));
 222
 223         btns.get('align-left').setActive(doc.queryCommandState('justifyleft'));
 224         btns.get('align-center').setActive(doc.queryCommandState('justifycenter'));
 225         btns.get('align-right').setActive(doc.queryCommandState('justifyright'));
 226
 227         //btns[frameId + '-insertorderedlist').setActive(doc.queryCommandState('insertorderedlist'));
 228         btns.get('list').setActive(doc.queryCommandState('insertunorderedlist'));
 229
 230         if (ev &&
 231             (ev.type == 'mouseup' || ev.type == 'click' ) &&
 232             ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
 233             // they have click on an image...
 234             // let's see if we can change the selection...
 235             sel = ev.target;
 236
 237         }
 238         var tn = sel && sel.tagName.toUpperCase() || '';
 239         if (sel && tn != 'A') {
 240             var asel = sel.closest('A');
 241             if (asel) {
 242                 sel = asel;
 243             }
 244         }
 245
 246         btns.get('link').setActive(tn == 'A');
 247
 248
 249
 250
 251         Roo.bootstrap.menu.Manager.hideAll();
 252         //this.editorsyncValue();
 253     },
 254     onFirstFocus: function() {
 255         this.buttons.each(function(item){
 256            item.enable();
 257         });
 258     },
 259     toggleSourceEdit : function(sourceEditMode){
 260
 261
 262         if(sourceEditMode){
 263             Roo.log("disabling buttons");
 264            this.buttons.each( function(item){
 265                 if(item.cmd != 'pencil'){
 266                     item.disable();
 267                 }
 268             });
 269
 270         }else{
 271             Roo.log("enabling buttons");
 272             if(this.editorcore.initialized){
 273                 this.buttons.each( function(item){
 274                     item.enable();
 275                 });
 276             }
 277
 278         }
 279         Roo.log("calling toggole on editor");
 280         // tell the editor that it's been pressed..
 281         this.editor.toggleSourceEdit(sourceEditMode);
 282
 283     }
 284 });
 285
 286
 287
 288