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