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.btnid; });
  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                 btnid : id,
  92                 fa: id,
  93                 cmd : cmd, // why id || cmd
  94                 enableToggle: toggle !== false,
  95                 html : html || '',
  96                 pressed : toggle ? false : null,
  97                 listeners : {}
  98             };
  99             a.listeners[toggle ? 'toggle' : 'click'] = function() {
 100                 handler ? handler.call(_this,this) :_this.onBtnClick.call(_this, cmd ||  id);
 101             };
 102             children.push(a);
 103             return a;
 104        }
 105
 106     //    var cb_box = function...
 107
 108         var style = {
 109                 xtype: 'Button',
 110                 size : 'sm',
 111                 xns: Roo.bootstrap,
 112                 fa : 'font',
 113                 //html : 'submit'
 114                 menu : {
 115                     xtype: 'Menu',
 116                     xns: Roo.bootstrap,
 117                     items:  []
 118                 }
 119         };
 120         Roo.each(this.formats, function(f) {
 121             style.menu.items.push({
 122                 xtype :'MenuItem',
 123                 xns: Roo.bootstrap,
 124                 html : '<'+ f+' style="margin:2px">'+f +'</'+ f+'>',
 125                 tagname : f,
 126                 listeners : {
 127                     click : function()
 128                     {
 129                         editorcore.insertTag(this.tagname);
 130                         editor.focus();
 131                     }
 132                 }
 133
 134             });
 135         });
 136         children.push(style);
 137
 138         btn('bold',         false,true);
 139         btn('italic',       false,true);
 140         btn('align-left',   'justifyleft',true);
 141         btn('align-center', 'justifycenter',true);
 142         btn('align-right' , 'justifyright',true);
 143         btn('link', false, true, function(btn) {
 144             var url = this.selectedNode && this.selectedNode.tagName.toUpperCase() == 'A' ?
 145                     this.selectedNode.getAttribute('href') : '';
 146
 147             Roo.bootstrap.MessageBox.show({
 148                 title : "Add / Edit Link URL",
 149                 msg : "Enter the URL for the link",
 150                 buttons: Roo.bootstrap.MessageBox.OKCANCEL,
 151                 minWidth: 250,
 152                 scope : this,
 153                 prompt:true,
 154                 multiline: false,
 155                 modal : true,
 156                 value : url,
 157                 fn:  function(pressed, newurl) {
 158                     if (pressed != 'ok') {
 159                         return;
 160                     }
 161                     if (url != '') {
 162                         this.selectedNode.setAttribute('href', newurl);
 163                         return;
 164                     }
 165                     if(newurl && newurl .match(/http(s):\/\/.+/)) {
 166                         this.editorcore.relayCmd('createlink', newurl);
 167                     }
 168                 }
 169             });
 170         });
 171         btn('list','insertunorderedlist',true);
 172         btn('list-ol','insertorderedlist',true);
 173
 174         btn('pencil', false,true, function(btn){
 175                 Roo.log(this);
 176                 this.toggleSourceEdit(btn.pressed);
 177         });
 178
 179         if (this.editor.btns.length > 0) {
 180             for (var i = 0; i<this.editor.btns.length; i++) {
 181                 children.push(this.editor.btns[i]);
 182             }
 183         }
 184
 185
 186
 187         this.xtype = 'NavSimplebar'; // why?
 188
 189         for(var i=0;i< children.length;i++) {
 190
 191             this.buttons.add(this.addxtypeChild(children[i]));
 192
 193         }
 194         this.buildToolbarDelete();
 195
 196         editor.on('editorevent', this.updateToolbar, this);
 197     },
 198
 199     buildToolbarDelete : function()
 200     {
 201
 202        /* this.addxtypeChild({
 203             xtype : 'Element',
 204             xns : Roo.bootstrap,
 205             cls : 'roo-htmleditor-fill'
 206         });
 207         */
 208         this.deleteBtn = this.addxtypeChild({
 209             size : 'sm',
 210             xtype: 'Button',
 211             xns: Roo.bootstrap,
 212             fa: 'trash',
 213             listeners : {
 214                 click : this.onDelete.createDelegate(this)
 215             }
 216         });
 217         this.deleteBtn.hide();
 218
 219     },
 220
 221
 222     onBtnClick : function(id)
 223     {
 224        this.editorcore.relayCmd(id);
 225        this.editorcore.focus();
 226     },
 227
 228     /**
 229      * Protected method that will not generally be called directly. It triggers
 230      * a toolbar update by reading the markup state of the current selection in the editor.
 231      */
 232     updateToolbar: function(editor ,ev, sel){
 233
 234         if(!this.editorcore.activated){
 235             this.editor.onFirstFocus(); // is this neeed?
 236             return;
 237         }
 238
 239         var btns = this.buttons;
 240         var doc = this.editorcore.doc;
 241         var hasToggle  = false;
 242         btns.each(function(e) {
 243             if (e.enableToggle && e.cmd) {
 244                 hasToggle = hasToggle  || (['align-left', 'align-right', 'align-center'].indexOf(e.btnid) < 0 && doc.queryCommandState(e.cmd));
 245                 e.setActive(doc.queryCommandState(e.cmd));
 246             }
 247         }, this);
 248
 249
 250         if (ev &&
 251             (ev.type == 'mouseup' || ev.type == 'click' ) &&
 252             ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
 253             // they have click on an image...
 254             // let's see if we can change the selection...
 255             sel = ev.target;
 256
 257         }
 258
 259         var ans = this.editorcore.getAllAncestors();
 260         if (!sel) {
 261             sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editorcore.doc.body;
 262             sel = sel ? sel : this.editorcore.doc.body;
 263             sel = sel.tagName.length ? sel : this.editorcore.doc.body;
 264
 265         }
 266
 267         var lastSel = this.selectedNode;
 268         this.selectedNode = sel;
 269
 270         // ok see if we are editing a block?
 271
 272         var db = false;
 273         // you are not actually selecting the block.
 274         if (sel && sel.hasAttribute('data-block')) {
 275             db = sel;
 276         } else if (sel && sel.closest('[data-block]')) {
 277             db = sel.closest('[data-block]');
 278         }
 279
 280
 281         var block = false;
 282         if (db && this.editorcore.enableBlocks) {
 283             block = Roo.htmleditor.Block.factory(db);
 284
 285             if (block) {
 286                 db.className =  (db.classList.length > 0  ? db.className + ' ' : '') +
 287                     ' roo-ed-selection';
 288                 sel = this.selectedNode = db;
 289             }
 290         }
 291
 292         // highlight the 'a'..
 293         var tn = sel && sel.tagName.toUpperCase() || '';
 294         if (!block && sel && tn != 'A') {
 295             var asel = sel.closest('A');
 296             if (asel) {
 297                 sel = asel;
 298             }
 299         }
 300
 301         btns.get('link').setActive(tn == 'A' && this.selectedNode.hasAttribute('href'));
 302
 303         Roo.bootstrap.menu.Manager.hideAll();
 304
 305
 306         Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
 307             e.classList.remove('roo-ed-selection');
 308         });
 309
 310
 311         // handle delete button..
 312         if (hasToggle || (tn.length && tn == 'BODY')) {
 313             this.deleteBtn.hide();
 314             return;
 315
 316         }
 317         this.deleteBtn.show();
 318
 319
 320
 321         //this.editorsyncValue();
 322     },
 323     onFirstFocus: function() {
 324         this.buttons.each(function(item){
 325            item.enable();
 326         });
 327     },
 328
 329     onDelete : function()
 330     {
 331         var range = this.editorcore.createRange();
 332         var selection = this.editorcore.getSelection();
 333         var sn = this.selectedNode;
 334         range.setStart(sn,0);
 335         range.setEnd(sn,0);
 336
 337
 338         if (sn.hasAttribute('data-block')) {
 339             var block = Roo.htmleditor.Block.factory(this.selectedNode);
 340             if (block) {
 341                 sn = block.removeNode();
 342                 sn.parentNode.removeChild(sn);
 343                 selection.removeAllRanges();
 344                 selection.addRange(range);
 345                 this.updateToolbar(null, null, null);
 346                 this.editorcore.fireEditorEvent(false);
 347                 return;
 348             }
 349
 350         }
 351         if (!sn) {
 352             return; // should not really happen..
 353         }
 354         if (sn && sn.tagName == 'BODY') {
 355             return;
 356         }
 357         var stn =  sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
 358
 359         // remove and keep parents.
 360         a = new Roo.htmleditor.FilterKeepChildren({tag : false});
 361         a.replaceTag(sn);
 362
 363         selection.removeAllRanges();
 364         selection.addRange(range);
 365         this.editorcore.fireEditorEvent(false);
 366
 367
 368     },
 369
 370
 371     toggleSourceEdit : function(sourceEditMode){
 372
 373
 374         if(sourceEditMode){
 375             Roo.log("disabling buttons");
 376            this.buttons.each( function(item){
 377                 if(item.cmd != 'pencil'){
 378                     item.disable();
 379                 }
 380             });
 381
 382         }else{
 383             Roo.log("enabling buttons");
 384             if(this.editorcore.initialized){
 385                 this.buttons.each( function(item){
 386                     item.enable();
 387                 });
 388             }
 389
 390         }
 391         Roo.log("calling toggole on editor");
 392         // tell the editor that it's been pressed..
 393         this.editor.toggleSourceEdit(sourceEditMode);
 394
 395     }
 396 });
 397
 398
 399
 400