1 // <script type="text/javascript">
5 * Copyright(c) 2006-2007, Ext JS, LLC.
11 * @class Roo.form.HtmlEditorToolbar1
16 new Roo.form.HtmlEditor({
19 new Roo.form.HtmlEditorToolbar1({
20 disable : { fonts: 1 , format: 1, ..., ... , ...],
26 * @cfg {Object} disable List of elements to disable..
27 * @cfg {Array} btns List of additional buttons.
31 * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
34 Roo.form.HtmlEditor.ToolbarStandard = function(config)
37 Roo.apply(this, config);
39 // default disabled, based on 'good practice'..
40 this.disable = this.disable || {};
41 Roo.applyIf(this.disable, {
44 specialElements : true
48 //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
49 // dont call parent... till later.
52 Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype, {
60 * @cfg {Object} disable List of toolbar elements to disable
65 * @cfg {Array} fontFamilies An array of available font families
83 // "á" , ?? a acute?
88 "°" // , // degrees
90 // "é" , // e ecute
91 // "ú" , // u ecute?
99 ihtml : '<table><tr><td>Cell</td></tr></table>'
103 text: "Insert Image",
106 ihtml : '<img src="about:blank"/>'
115 "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
116 "input:submit", "input:button", "select", "textarea", "label" ],
119 ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
121 ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
129 * @cfg {String} defaultFont default font to use.
131 defaultFont: 'tahoma',
138 init : function(editor)
140 this.editor = editor;
143 var fid = editor.frameId;
145 function btn(id, toggle, handler){
146 var xid = fid + '-'+ id ;
150 cls : 'x-btn-icon x-edit-'+id,
151 enableToggle:toggle !== false,
152 scope: editor, // was editor...
153 handler:handler||editor.relayBtnCmd,
154 clickEvent:'mousedown',
155 tooltip: etb.buttonTips[id] || undefined, ///tips ???
162 var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
165 tb.el.on('click', function(e){
166 e.preventDefault(); // what does this do?
169 if(!this.disable.font) { // && !Roo.isSafari){
170 /* why no safari for fonts
171 editor.fontSelect = tb.el.createChild({
175 html: this.createFontOptions()
178 editor.fontSelect.on('change', function(){
179 var font = editor.fontSelect.dom.value;
180 editor.relayCmd('fontname', font);
185 editor.fontSelect.dom,
191 if(!this.disable.formats){
192 this.formatCombo = new Roo.form.ComboBox({
193 store: new Roo.data.SimpleStore({
196 data : this.formats // from states.js
200 //autoCreate : {tag: "div", size: "20"},
205 triggerAction: 'all',
210 'select': function(c, r, i) {
211 editor.insertTag(r.get('tag'));
217 tb.addField(this.formatCombo);
221 if(!this.disable.format){
228 if(!this.disable.fontSize){
233 btn('increasefontsize', false, editor.adjustFont),
234 btn('decreasefontsize', false, editor.adjustFont)
239 if(!this.disable.colors){
242 id:editor.frameId +'-forecolor',
243 cls:'x-btn-icon x-edit-forecolor',
244 clickEvent:'mousedown',
245 tooltip: this.buttonTips['forecolor'] || undefined,
247 menu : new Roo.menu.ColorMenu({
252 selectHandler: function(cp, color){
253 editor.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
257 clickEvent:'mousedown'
260 id:editor.frameId +'backcolor',
261 cls:'x-btn-icon x-edit-backcolor',
262 clickEvent:'mousedown',
263 tooltip: this.buttonTips['backcolor'] || undefined,
265 menu : new Roo.menu.ColorMenu({
270 selectHandler: function(cp, color){
272 editor.execCmd('useCSS', false);
273 editor.execCmd('hilitecolor', color);
274 editor.execCmd('useCSS', true);
277 editor.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
278 Roo.isSafari || Roo.isIE ? '#'+color : color);
283 clickEvent:'mousedown'
288 // now add all the items...
291 if(!this.disable.alignments){
295 btn('justifycenter'),
301 if(!this.disable.links){
304 btn('createlink', false, editor.createLink) /// MOVE TO HERE?!!?!?!?!
308 if(!this.disable.lists){
311 btn('insertorderedlist'),
312 btn('insertunorderedlist')
315 if(!this.disable.sourceEdit){
318 btn('sourceedit', true, function(btn){
319 this.toggleSourceEdit(btn.pressed);
326 // special menu.. - needs to be tidied up..
327 if (!this.disable.special) {
336 for (var i =0; i < this.specialChars.length; i++) {
337 smenu.menu.items.push({
339 html: this.specialChars[i],
340 handler: function(a,b) {
341 editor.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
342 //editor.insertAtCursor(a.html);
356 if (!this.disable.cleanStyles) {
357 Roo.log('init toolbar style');
359 cls: 'x-btn-icon x-btn-clear',
365 for (var i =0; i < this.cleanStyles.length; i++) {
366 cmenu.menu.items.push({
368 html: this.cleanStyles[i],
369 handler: function(a,b) {
370 var c = Roo.get(editor.doc.body);
372 c.select('[style]').each(function(i) {
376 // editor.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
377 //editor.insertAtCursor(a.html);
390 if (!this.disable.specialElements) {
398 for (var i =0; i < this.specialElements.length; i++) {
399 semenu.menu.items.push(
401 handler: function(a,b) {
402 editor.insertAtCursor(this.ihtml);
404 }, this.specialElements[i])
416 for(var i =0; i< this.btns.length;i++) {
417 var b = Roo.factory(this.btns[i],Roo.form);
418 b.cls = 'x-edit-none';
427 // disable everything...
429 this.tb.items.each(function(item){
430 if(item.id != editor.frameId+ '-sourceedit'){
434 this.rendered = true;
437 editor.on('editorevent', this.updateToolbar, this);
438 // other toolbars need to implement this..
439 //editor.on('editmodechange', this.updateToolbar, this);
445 * Protected method that will not generally be called directly. It triggers
446 * a toolbar update by reading the markup state of the current selection in the editor.
448 updateToolbar: function(){
450 if(!this.editor.activated){
451 this.editor.onFirstFocus();
455 var btns = this.tb.items.map,
456 doc = this.editor.doc,
457 frameId = this.editor.frameId;
459 if(!this.disable.font && !Roo.isSafari){
461 var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
462 if(name != this.fontSelect.dom.value){
463 this.fontSelect.dom.value = name;
467 if(!this.disable.format){
468 btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
469 btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
470 btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
472 if(!this.disable.alignments){
473 btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
474 btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
475 btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
477 if(!Roo.isSafari && !this.disable.lists){
478 btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
479 btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
482 var ans = this.editor.getAllAncestors();
483 if (this.formatCombo) {
486 var store = this.formatCombo.store;
487 this.formatCombo.setValue("");
488 for (var i =0; i < ans.length;i++) {
489 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
491 this.formatCombo.setValue(ans[i].tagName.toLowerCase());
499 // hides menus... - so this cant be on a menu...
500 Roo.menu.MenuMgr.hideAll();
502 //this.editorsyncValue();
506 createFontOptions : function(){
507 var buf = [], fs = this.fontFamilies, ff, lc;
511 for(var i = 0, len = fs.length; i< len; i++){
513 lc = ff.toLowerCase();
515 '<option value="',lc,'" style="font-family:',ff,';"',
516 (this.defaultFont == lc ? ' selected="true">' : '>'),
524 toggleSourceEdit : function(sourceEditMode){
525 if(sourceEditMode === undefined){
526 sourceEditMode = !this.sourceEditMode;
528 this.sourceEditMode = sourceEditMode === true;
529 var btn = this.tb.items.get(this.editor.frameId +'-sourceedit');
530 // just toggle the button?
531 if(btn.pressed !== this.editor.sourceEditMode){
532 btn.toggle(this.editor.sourceEditMode);
536 if(this.sourceEditMode){
537 this.tb.items.each(function(item){
538 if(item.cmd != 'sourceedit'){
544 if(this.initialized){
545 this.tb.items.each(function(item){
551 // tell the editor that it's been pressed..
552 this.editor.toggleSourceEdit(sourceEditMode);
556 * Object collection of toolbar tooltips for the buttons in the editor. The key
557 * is the command id associated with that button and the value is a valid QuickTips object.
562 title: 'Bold (Ctrl+B)',
563 text: 'Make the selected text bold.',
564 cls: 'x-html-editor-tip'
567 title: 'Italic (Ctrl+I)',
568 text: 'Make the selected text italic.',
569 cls: 'x-html-editor-tip'
577 title: 'Bold (Ctrl+B)',
578 text: 'Make the selected text bold.',
579 cls: 'x-html-editor-tip'
582 title: 'Italic (Ctrl+I)',
583 text: 'Make the selected text italic.',
584 cls: 'x-html-editor-tip'
587 title: 'Underline (Ctrl+U)',
588 text: 'Underline the selected text.',
589 cls: 'x-html-editor-tip'
593 text: 'Increase the font size.',
594 cls: 'x-html-editor-tip'
597 title: 'Shrink Text',
598 text: 'Decrease the font size.',
599 cls: 'x-html-editor-tip'
602 title: 'Text Highlight Color',
603 text: 'Change the background color of the selected text.',
604 cls: 'x-html-editor-tip'
608 text: 'Change the color of the selected text.',
609 cls: 'x-html-editor-tip'
612 title: 'Align Text Left',
613 text: 'Align text to the left.',
614 cls: 'x-html-editor-tip'
617 title: 'Center Text',
618 text: 'Center text in the editor.',
619 cls: 'x-html-editor-tip'
622 title: 'Align Text Right',
623 text: 'Align text to the right.',
624 cls: 'x-html-editor-tip'
626 insertunorderedlist : {
627 title: 'Bullet List',
628 text: 'Start a bulleted list.',
629 cls: 'x-html-editor-tip'
631 insertorderedlist : {
632 title: 'Numbered List',
633 text: 'Start a numbered list.',
634 cls: 'x-html-editor-tip'
638 text: 'Make the selected text a hyperlink.',
639 cls: 'x-html-editor-tip'
642 title: 'Source Edit',
643 text: 'Switch to source editing mode.',
644 cls: 'x-html-editor-tip'
648 onDestroy : function(){
651 this.tb.items.each(function(item){
653 item.menu.removeAll();
655 item.menu.el.destroy();
663 onFirstFocus: function() {
664 this.tb.items.each(function(item){