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);
38 //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
39 // dont call parent... till later.
42 Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype, {
50 * @cfg {Object} disable List of toolbar elements to disable
55 * @cfg {Array} fontFamilies An array of available font families
73 // "á" , ?? a acute?
78 "°" // , // degrees
80 // "é" , // e ecute
81 // "ú" , // u ecute?
89 handler: function(a,b) {
90 // should we show a dialog.?
91 editor.insertAtCursor('<table><<tr><td></td></tr></table>');
100 handler: function(a,b) {
101 // should we show a dialog.?
102 editor.insertAtCursor('<img src="about:blank"/>');
113 "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
114 "input:submit", "input:button", "select", "textarea", "label" ],
117 ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
119 ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"]
122 * @cfg {String} defaultFont default font to use.
124 defaultFont: 'tahoma',
131 init : function(editor)
133 this.editor = editor;
136 var fid = editor.frameId;
138 function btn(id, toggle, handler){
139 var xid = fid + '-'+ id ;
143 cls : 'x-btn-icon x-edit-'+id,
144 enableToggle:toggle !== false,
145 scope: editor, // was editor...
146 handler:handler||editor.relayBtnCmd,
147 clickEvent:'mousedown',
148 tooltip: etb.buttonTips[id] || undefined, ///tips ???
155 var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
158 tb.el.on('click', function(e){
159 e.preventDefault(); // what does this do?
162 if(!this.disable.font && !Roo.isSafari){
163 /* why no safari for fonts
164 editor.fontSelect = tb.el.createChild({
168 html: editor.createFontOptions()
170 editor.fontSelect.on('change', function(){
171 var font = editor.fontSelect.dom.value;
172 editor.relayCmd('fontname', font);
176 editor.fontSelect.dom,
181 if(!this.disable.formats){
182 this.formatCombo = new Roo.form.ComboBox({
183 store: new Roo.data.SimpleStore({
186 data : this.formats // from states.js
189 //autoCreate : {tag: "div", size: "20"},
194 triggerAction: 'all',
199 'select': function(c, r, i) {
200 editor.insertTag(r.get('tag'));
206 tb.addField(this.formatCombo);
210 if(!this.disable.format){
217 if(!this.disable.fontSize){
222 btn('increasefontsize', false, editor.adjustFont),
223 btn('decreasefontsize', false, editor.adjustFont)
228 if(this.disable.colors){
231 id:editor.frameId +'-forecolor',
232 cls:'x-btn-icon x-edit-forecolor',
233 clickEvent:'mousedown',
234 tooltip: this.buttonTips['forecolor'] || undefined,
236 menu : new Roo.menu.ColorMenu({
241 selectHandler: function(cp, color){
242 editor.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
246 clickEvent:'mousedown'
249 id:editor.frameId +'backcolor',
250 cls:'x-btn-icon x-edit-backcolor',
251 clickEvent:'mousedown',
252 tooltip: this.buttonTips['backcolor'] || undefined,
254 menu : new Roo.menu.ColorMenu({
259 selectHandler: function(cp, color){
261 editor.execCmd('useCSS', false);
262 editor.execCmd('hilitecolor', color);
263 editor.execCmd('useCSS', true);
266 editor.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
267 Roo.isSafari || Roo.isIE ? '#'+color : color);
272 clickEvent:'mousedown'
277 // now add all the items...
280 if(!this.disable.alignments){
284 btn('justifycenter'),
290 if(!this.disable.links){
293 btn('createlink', false, editor.createLink) /// MOVE TO HERE?!!?!?!?!
297 if(!this.disable.lists){
300 btn('insertorderedlist'),
301 btn('insertunorderedlist')
304 if(!this.disable.sourceEdit){
307 btn('sourceedit', true, function(btn){
308 this.toggleSourceEdit(btn.pressed);
315 // special menu.. - needs to be tidied up..
316 if (!this.disable.special) {
325 for (var i =0; i < this.specialChars.length; i++) {
326 smenu.menu.items.push({
328 html: this.specialChars[i],
329 handler: function(a,b) {
330 editor.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
343 if (!this.disable.specialElements) {
348 items : this.specialElements
358 for(var i =0; i< this.btns.length;i++) {
359 var b = this.btns[i];
360 b.cls = 'x-edit-none';
369 // disable everything...
371 this.tb.items.each(function(item){
372 if(item.id != editor.frameId+ '-sourceedit'){
376 this.rendered = true;
379 editor.on('editorevent', this.updateToolbar, this);
380 // other toolbars need to implement this..
381 //editor.on('editmodechange', this.updateToolbar, this);
387 * Protected method that will not generally be called directly. It triggers
388 * a toolbar update by reading the markup state of the current selection in the editor.
390 updateToolbar: function(){
392 if(!this.editor.activated){
393 this.editor.onFirstFocus();
397 var btns = this.tb.items.map,
398 doc = this.editor.doc,
399 frameId = this.editor.frameId;
401 if(!this.disable.font && !Roo.isSafari){
403 var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
404 if(name != this.fontSelect.dom.value){
405 this.fontSelect.dom.value = name;
409 if(!this.disable.format){
410 btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
411 btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
412 btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
414 if(!this.disable.alignments){
415 btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
416 btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
417 btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
419 if(!Roo.isSafari && !this.disable.lists){
420 btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
421 btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
424 var ans = this.editor.getAllAncestors();
425 if (this.formatCombo) {
428 var store = this.formatCombo.store;
429 this.formatCombo.setValue("");
430 for (var i =0; i < ans.length;i++) {
431 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
433 this.formatCombo.setValue(ans[i].tagName.toLowerCase());
441 // hides menus... - so this cant be on a menu...
442 Roo.menu.MenuMgr.hideAll();
444 //this.editorsyncValue();
448 createFontOptions : function(){
449 var buf = [], fs = this.fontFamilies, ff, lc;
450 for(var i = 0, len = fs.length; i< len; i++){
452 lc = ff.toLowerCase();
454 '<option value="',lc,'" style="font-family:',ff,';"',
455 (this.defaultFont == lc ? ' selected="true">' : '>'),
463 toggleSourceEdit : function(sourceEditMode){
464 if(sourceEditMode === undefined){
465 sourceEditMode = !this.sourceEditMode;
467 this.sourceEditMode = sourceEditMode === true;
468 var btn = this.tb.items.get(this.editor.frameId +'-sourceedit');
469 // just toggle the button?
470 if(btn.pressed !== this.editor.sourceEditMode){
471 btn.toggle(this.editor.sourceEditMode);
475 if(this.sourceEditMode){
476 this.tb.items.each(function(item){
477 if(item.cmd != 'sourceedit'){
483 if(this.initialized){
484 this.tb.items.each(function(item){
490 // tell the editor that it's been pressed..
491 this.editor.toggleSourceEdit(sourceEditMode);
495 * Object collection of toolbar tooltips for the buttons in the editor. The key
496 * is the command id associated with that button and the value is a valid QuickTips object.
501 title: 'Bold (Ctrl+B)',
502 text: 'Make the selected text bold.',
503 cls: 'x-html-editor-tip'
506 title: 'Italic (Ctrl+I)',
507 text: 'Make the selected text italic.',
508 cls: 'x-html-editor-tip'
516 title: 'Bold (Ctrl+B)',
517 text: 'Make the selected text bold.',
518 cls: 'x-html-editor-tip'
521 title: 'Italic (Ctrl+I)',
522 text: 'Make the selected text italic.',
523 cls: 'x-html-editor-tip'
526 title: 'Underline (Ctrl+U)',
527 text: 'Underline the selected text.',
528 cls: 'x-html-editor-tip'
532 text: 'Increase the font size.',
533 cls: 'x-html-editor-tip'
536 title: 'Shrink Text',
537 text: 'Decrease the font size.',
538 cls: 'x-html-editor-tip'
541 title: 'Text Highlight Color',
542 text: 'Change the background color of the selected text.',
543 cls: 'x-html-editor-tip'
547 text: 'Change the color of the selected text.',
548 cls: 'x-html-editor-tip'
551 title: 'Align Text Left',
552 text: 'Align text to the left.',
553 cls: 'x-html-editor-tip'
556 title: 'Center Text',
557 text: 'Center text in the editor.',
558 cls: 'x-html-editor-tip'
561 title: 'Align Text Right',
562 text: 'Align text to the right.',
563 cls: 'x-html-editor-tip'
565 insertunorderedlist : {
566 title: 'Bullet List',
567 text: 'Start a bulleted list.',
568 cls: 'x-html-editor-tip'
570 insertorderedlist : {
571 title: 'Numbered List',
572 text: 'Start a numbered list.',
573 cls: 'x-html-editor-tip'
577 text: 'Make the selected text a hyperlink.',
578 cls: 'x-html-editor-tip'
581 title: 'Source Edit',
582 text: 'Switch to source editing mode.',
583 cls: 'x-html-editor-tip'
587 onDestroy : function(){
590 this.tb.items.each(function(item){
592 item.menu.removeAll();
594 item.menu.el.destroy();
602 onFirstFocus: function() {
603 this.tb.items.each(function(item){