git.roojs.org Git - roojs1/blob - Roo/form/HtmlEditor/ToolbarStandard.js

   1 // <script type="text/javascript">
   2 /*
   3  * Based on
   4  * Ext JS Library 1.1.1
   5  * Copyright(c) 2006-2007, Ext JS, LLC.
   6  *
   7
   8  */
   9
  10 /**
  11  * @class Roo.form.HtmlEditorToolbar1
  12  * Basic Toolbar
  13  *
  14  * Usage:
  15  *
  16  new Roo.form.HtmlEditor({
  17     ....
  18     toolbars : [
  19         new Roo.form.HtmlEditorToolbar1({
  20             disable : { fonts: 1 , format: 1, ..., ... , ...],
  21             btns : [ .... ]
  22         })
  23     }
  24
  25  *
  26  * @cfg {Object} disable List of elements to disable..
  27  * @cfg {Array} btns List of additional buttons.
  28  *
  29  *
  30  * NEEDS Extra CSS?
  31  * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
  32  */
  33
  34 Roo.form.HtmlEditor.ToolbarStandard = function(config)
  35 {
  36
  37     Roo.apply(this, config);
  38
  39     // default disabled, based on 'good practice'..
  40     this.disable = this.disable || {};
  41     Roo.applyIf(this.disable, {
  42         fontSize : true,
  43         colors : true,
  44         specialElements : true
  45     });
  46
  47
  48     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
  49     // dont call parent... till later.
  50 }
  51
  52 Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
  53
  54     tb: false,
  55
  56     rendered: false,
  57
  58     editor : false,
  59     /**
  60      * @cfg {Object} disable  List of toolbar elements to disable
  61
  62      */
  63     disable : false,
  64       /**
  65      * @cfg {Array} fontFamilies An array of available font families
  66      */
  67     fontFamilies : [
  68         'Arial',
  69         'Courier New',
  70         'Tahoma',
  71         'Times New Roman',
  72         'Verdana'
  73     ],
  74
  75     specialChars : [
  76            "&#169;",
  77           "&#174;",
  78           "&#8482;",
  79           "&#163;" ,
  80          // "&#8212;",
  81           "&#8230;",
  82           "&#247;" ,
  83         //  "&#225;" ,     ?? a acute?
  84            "&#8364;"    , //Euro
  85        //   "&#8220;"    ,
  86         //  "&#8221;"    ,
  87         //  "&#8226;"    ,
  88           "&#176;"  //   , // degrees
  89
  90          // "&#233;"     , // e ecute
  91          // "&#250;"     , // u ecute?
  92     ],
  93
  94     specialElements : [
  95         {
  96             text: "Insert Table",
  97             xtype: 'MenuItem',
  98             xns : Roo.Menu,
  99             ihtml :  '<table><tr><td>Cell</td></tr></table>'
 100
 101         },
 102         {
 103             text: "Insert Image",
 104             xtype: 'MenuItem',
 105             xns : Roo.Menu,
 106             ihtml : '<img src="about:blank"/>'
 107
 108         }
 109
 110
 111     ],
 112
 113
 114     inputElements : [
 115             "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
 116             "input:submit", "input:button", "select", "textarea", "label" ],
 117     formats : [
 118         ["p"] ,
 119         ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
 120         ["pre"],[ "code"],
 121         ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
 122         ['div'],['span']
 123     ],
 124
 125     cleanStyles : [
 126         "font-size",
 127         "color"
 128     ],
 129      /**
 130      * @cfg {String} defaultFont default font to use.
 131      */
 132     defaultFont: 'tahoma',
 133
 134     fontSelect : false,
 135
 136
 137     formatCombo : false,
 138
 139     init : function(editor)
 140     {
 141         this.editor = editor;
 142
 143
 144         var fid = editor.frameId;
 145         var etb = this;
 146         function btn(id, toggle, handler){
 147             var xid = fid + '-'+ id ;
 148             return {
 149                 id : xid,
 150                 cmd : id,
 151                 cls : 'x-btn-icon x-edit-'+id,
 152                 enableToggle:toggle !== false,
 153                 scope: editor, // was editor...
 154                 handler:handler||editor.relayBtnCmd,
 155                 clickEvent:'mousedown',
 156                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
 157                 tabIndex:-1
 158             };
 159         }
 160
 161
 162
 163         var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
 164         this.tb = tb;
 165          // stop form submits
 166         tb.el.on('click', function(e){
 167             e.preventDefault(); // what does this do?
 168         });
 169
 170         if(!this.disable.font) { // && !Roo.isSafari){
 171             /* why no safari for fonts
 172             editor.fontSelect = tb.el.createChild({
 173                 tag:'select',
 174                 tabIndex: -1,
 175                 cls:'x-font-select',
 176                 html: this.createFontOptions()
 177             });
 178
 179             editor.fontSelect.on('change', function(){
 180                 var font = editor.fontSelect.dom.value;
 181                 editor.relayCmd('fontname', font);
 182                 editor.deferFocus();
 183             }, editor);
 184
 185             tb.add(
 186                 editor.fontSelect.dom,
 187                 '-'
 188             );
 189             */
 190
 191         };
 192         if(!this.disable.formats){
 193             this.formatCombo = new Roo.form.ComboBox({
 194                 store: new Roo.data.SimpleStore({
 195                     id : 'tag',
 196                     fields: ['tag'],
 197                     data : this.formats // from states.js
 198                 }),
 199                 blockFocus : true,
 200                 name : '',
 201                 //autoCreate : {tag: "div",  size: "20"},
 202                 displayField:'tag',
 203                 typeAhead: false,
 204                 mode: 'local',
 205                 editable : false,
 206                 triggerAction: 'all',
 207                 emptyText:'Add tag',
 208                 selectOnFocus:true,
 209                 width:135,
 210                 listeners : {
 211                     'select': function(c, r, i) {
 212                         editor.insertTag(r.get('tag'));
 213                         editor.focus();
 214                     }
 215                 }
 216
 217             });
 218             tb.addField(this.formatCombo);
 219
 220         }
 221
 222         if(!this.disable.format){
 223             tb.add(
 224                 btn('bold'),
 225                 btn('italic'),
 226                 btn('underline')
 227             );
 228         };
 229         if(!this.disable.fontSize){
 230             tb.add(
 231                 '-',
 232
 233
 234                 btn('increasefontsize', false, editor.adjustFont),
 235                 btn('decreasefontsize', false, editor.adjustFont)
 236             );
 237         };
 238
 239
 240         if(!this.disable.colors){
 241             tb.add(
 242                 '-', {
 243                     id:editor.frameId +'-forecolor',
 244                     cls:'x-btn-icon x-edit-forecolor',
 245                     clickEvent:'mousedown',
 246                     tooltip: this.buttonTips['forecolor'] || undefined,
 247                     tabIndex:-1,
 248                     menu : new Roo.menu.ColorMenu({
 249                         allowReselect: true,
 250                         focus: Roo.emptyFn,
 251                         value:'000000',
 252                         plain:true,
 253                         selectHandler: function(cp, color){
 254                             editor.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
 255                             editor.deferFocus();
 256                         },
 257                         scope: editor,
 258                         clickEvent:'mousedown'
 259                     })
 260                 }, {
 261                     id:editor.frameId +'backcolor',
 262                     cls:'x-btn-icon x-edit-backcolor',
 263                     clickEvent:'mousedown',
 264                     tooltip: this.buttonTips['backcolor'] || undefined,
 265                     tabIndex:-1,
 266                     menu : new Roo.menu.ColorMenu({
 267                         focus: Roo.emptyFn,
 268                         value:'FFFFFF',
 269                         plain:true,
 270                         allowReselect: true,
 271                         selectHandler: function(cp, color){
 272                             if(Roo.isGecko){
 273                                 editor.execCmd('useCSS', false);
 274                                 editor.execCmd('hilitecolor', color);
 275                                 editor.execCmd('useCSS', true);
 276                                 editor.deferFocus();
 277                             }else{
 278                                 editor.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
 279                                     Roo.isSafari || Roo.isIE ? '#'+color : color);
 280                                 editor.deferFocus();
 281                             }
 282                         },
 283                         scope:editor,
 284                         clickEvent:'mousedown'
 285                     })
 286                 }
 287             );
 288         };
 289         // now add all the items...
 290
 291
 292         if(!this.disable.alignments){
 293             tb.add(
 294                 '-',
 295                 btn('justifyleft'),
 296                 btn('justifycenter'),
 297                 btn('justifyright')
 298             );
 299         };
 300
 301         //if(!Roo.isSafari){
 302             if(!this.disable.links){
 303                 tb.add(
 304                     '-',
 305                     btn('createlink', false, editor.createLink)    /// MOVE TO HERE?!!?!?!?!
 306                 );
 307             };
 308
 309             if(!this.disable.lists){
 310                 tb.add(
 311                     '-',
 312                     btn('insertorderedlist'),
 313                     btn('insertunorderedlist')
 314                 );
 315             }
 316             if(!this.disable.sourceEdit){
 317                 tb.add(
 318                     '-',
 319                     btn('sourceedit', true, function(btn){
 320                         this.toggleSourceEdit(btn.pressed);
 321                     })
 322                 );
 323             }
 324         //}
 325
 326         var smenu = { };
 327         // special menu.. - needs to be tidied up..
 328         if (!this.disable.special) {
 329             smenu = {
 330                 text: "&#169;",
 331                 cls: 'x-edit-none',
 332
 333                 menu : {
 334                     items : []
 335                 }
 336             };
 337             for (var i =0; i < this.specialChars.length; i++) {
 338                 smenu.menu.items.push({
 339
 340                     html: this.specialChars[i],
 341                     handler: function(a,b) {
 342                         editor.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
 343                         //editor.insertAtCursor(a.html);
 344
 345                     },
 346                     tabIndex:-1
 347                 });
 348             }
 349
 350
 351             tb.add(smenu);
 352
 353
 354         }
 355
 356         var cmenu = { };
 357         if (!this.disable.cleanStyles) {
 358             Roo.log('init toolbar style');
 359             cmenu = {
 360                 cls: 'x-btn-icon x-btn-clear',
 361
 362                 menu : {
 363                     items : []
 364                 }
 365             };
 366             for (var i =0; i < this.cleanStyles.length; i++) {
 367                 var style = this.cleanStyles[i];
 368                 cmenu.menu.items.push({
 369
 370                     html: style,
 371                     handler: function(a,b) {
 372                         Roo.log('style');
 373                         Roo.log(style)
 374                         var c = Roo.get(editor.doc.body);
 375                         var nodes = [];
 376                         c.select('[style]').each(function(s) {
 377                             s.dom.style.removeProperty(style);
 378                         });
 379
 380                     },
 381                     tabIndex:-1
 382                 });
 383             }
 384
 385
 386             tb.add(cmenu);
 387
 388
 389         }
 390
 391         if (!this.disable.specialElements) {
 392             var semenu = {
 393                 text: "Other;",
 394                 cls: 'x-edit-none',
 395                 menu : {
 396                     items : []
 397                 }
 398             };
 399             for (var i =0; i < this.specialElements.length; i++) {
 400                 semenu.menu.items.push(
 401                     Roo.apply({
 402                         handler: function(a,b) {
 403                             editor.insertAtCursor(this.ihtml);
 404                         }
 405                     }, this.specialElements[i])
 406                 );
 407
 408             }
 409
 410             tb.add(semenu);
 411
 412
 413         }
 414
 415
 416         if (this.btns) {
 417             for(var i =0; i< this.btns.length;i++) {
 418                 var b = Roo.factory(this.btns[i],Roo.form);
 419                 b.cls =  'x-edit-none';
 420                 b.scope = editor;
 421                 tb.add(b);
 422             }
 423
 424         }
 425
 426
 427
 428         // disable everything...
 429
 430         this.tb.items.each(function(item){
 431            if(item.id != editor.frameId+ '-sourceedit'){
 432                 item.disable();
 433             }
 434         });
 435         this.rendered = true;
 436
 437         // the all the btns;
 438         editor.on('editorevent', this.updateToolbar, this);
 439         // other toolbars need to implement this..
 440         //editor.on('editmodechange', this.updateToolbar, this);
 441     },
 442
 443
 444
 445     /**
 446      * Protected method that will not generally be called directly. It triggers
 447      * a toolbar update by reading the markup state of the current selection in the editor.
 448      */
 449     updateToolbar: function(){
 450
 451         if(!this.editor.activated){
 452             this.editor.onFirstFocus();
 453             return;
 454         }
 455
 456         var btns = this.tb.items.map,
 457             doc = this.editor.doc,
 458             frameId = this.editor.frameId;
 459
 460         if(!this.disable.font && !Roo.isSafari){
 461             /*
 462             var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
 463             if(name != this.fontSelect.dom.value){
 464                 this.fontSelect.dom.value = name;
 465             }
 466             */
 467         }
 468         if(!this.disable.format){
 469             btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
 470             btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
 471             btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
 472         }
 473         if(!this.disable.alignments){
 474             btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
 475             btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
 476             btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
 477         }
 478         if(!Roo.isSafari && !this.disable.lists){
 479             btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
 480             btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
 481         }
 482
 483         var ans = this.editor.getAllAncestors();
 484         if (this.formatCombo) {
 485
 486
 487             var store = this.formatCombo.store;
 488             this.formatCombo.setValue("");
 489             for (var i =0; i < ans.length;i++) {
 490                 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
 491                     // select it..
 492                     this.formatCombo.setValue(ans[i].tagName.toLowerCase());
 493                     break;
 494                 }
 495             }
 496         }
 497
 498
 499
 500         // hides menus... - so this cant be on a menu...
 501         Roo.menu.MenuMgr.hideAll();
 502
 503         //this.editorsyncValue();
 504     },
 505
 506
 507     createFontOptions : function(){
 508         var buf = [], fs = this.fontFamilies, ff, lc;
 509
 510
 511
 512         for(var i = 0, len = fs.length; i< len; i++){
 513             ff = fs[i];
 514             lc = ff.toLowerCase();
 515             buf.push(
 516                 '<option value="',lc,'" style="font-family:',ff,';"',
 517                     (this.defaultFont == lc ? ' selected="true">' : '>'),
 518                     ff,
 519                 '</option>'
 520             );
 521         }
 522         return buf.join('');
 523     },
 524
 525     toggleSourceEdit : function(sourceEditMode){
 526         if(sourceEditMode === undefined){
 527             sourceEditMode = !this.sourceEditMode;
 528         }
 529         this.sourceEditMode = sourceEditMode === true;
 530         var btn = this.tb.items.get(this.editor.frameId +'-sourceedit');
 531         // just toggle the button?
 532         if(btn.pressed !== this.editor.sourceEditMode){
 533             btn.toggle(this.editor.sourceEditMode);
 534             return;
 535         }
 536
 537         if(this.sourceEditMode){
 538             this.tb.items.each(function(item){
 539                 if(item.cmd != 'sourceedit'){
 540                     item.disable();
 541                 }
 542             });
 543
 544         }else{
 545             if(this.initialized){
 546                 this.tb.items.each(function(item){
 547                     item.enable();
 548                 });
 549             }
 550
 551         }
 552         // tell the editor that it's been pressed..
 553         this.editor.toggleSourceEdit(sourceEditMode);
 554
 555     },
 556      /**
 557      * Object collection of toolbar tooltips for the buttons in the editor. The key
 558      * is the command id associated with that button and the value is a valid QuickTips object.
 559      * For example:
 560 <pre><code>
 561 {
 562     bold : {
 563         title: 'Bold (Ctrl+B)',
 564         text: 'Make the selected text bold.',
 565         cls: 'x-html-editor-tip'
 566     },
 567     italic : {
 568         title: 'Italic (Ctrl+I)',
 569         text: 'Make the selected text italic.',
 570         cls: 'x-html-editor-tip'
 571     },
 572     ...
 573 </code></pre>
 574     * @type Object
 575      */
 576     buttonTips : {
 577         bold : {
 578             title: 'Bold (Ctrl+B)',
 579             text: 'Make the selected text bold.',
 580             cls: 'x-html-editor-tip'
 581         },
 582         italic : {
 583             title: 'Italic (Ctrl+I)',
 584             text: 'Make the selected text italic.',
 585             cls: 'x-html-editor-tip'
 586         },
 587         underline : {
 588             title: 'Underline (Ctrl+U)',
 589             text: 'Underline the selected text.',
 590             cls: 'x-html-editor-tip'
 591         },
 592         increasefontsize : {
 593             title: 'Grow Text',
 594             text: 'Increase the font size.',
 595             cls: 'x-html-editor-tip'
 596         },
 597         decreasefontsize : {
 598             title: 'Shrink Text',
 599             text: 'Decrease the font size.',
 600             cls: 'x-html-editor-tip'
 601         },
 602         backcolor : {
 603             title: 'Text Highlight Color',
 604             text: 'Change the background color of the selected text.',
 605             cls: 'x-html-editor-tip'
 606         },
 607         forecolor : {
 608             title: 'Font Color',
 609             text: 'Change the color of the selected text.',
 610             cls: 'x-html-editor-tip'
 611         },
 612         justifyleft : {
 613             title: 'Align Text Left',
 614             text: 'Align text to the left.',
 615             cls: 'x-html-editor-tip'
 616         },
 617         justifycenter : {
 618             title: 'Center Text',
 619             text: 'Center text in the editor.',
 620             cls: 'x-html-editor-tip'
 621         },
 622         justifyright : {
 623             title: 'Align Text Right',
 624             text: 'Align text to the right.',
 625             cls: 'x-html-editor-tip'
 626         },
 627         insertunorderedlist : {
 628             title: 'Bullet List',
 629             text: 'Start a bulleted list.',
 630             cls: 'x-html-editor-tip'
 631         },
 632         insertorderedlist : {
 633             title: 'Numbered List',
 634             text: 'Start a numbered list.',
 635             cls: 'x-html-editor-tip'
 636         },
 637         createlink : {
 638             title: 'Hyperlink',
 639             text: 'Make the selected text a hyperlink.',
 640             cls: 'x-html-editor-tip'
 641         },
 642         sourceedit : {
 643             title: 'Source Edit',
 644             text: 'Switch to source editing mode.',
 645             cls: 'x-html-editor-tip'
 646         }
 647     },
 648     // private
 649     onDestroy : function(){
 650         if(this.rendered){
 651
 652             this.tb.items.each(function(item){
 653                 if(item.menu){
 654                     item.menu.removeAll();
 655                     if(item.menu.el){
 656                         item.menu.el.destroy();
 657                     }
 658                 }
 659                 item.destroy();
 660             });
 661
 662         }
 663     },
 664     onFirstFocus: function() {
 665         this.tb.items.each(function(item){
 666            item.enable();
 667         });
 668     }
 669 });
 670
 671
 672
 673