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, {
61 * @cfg {Object} disable List of toolbar elements to disable
66 * @cfg {Array} fontFamilies An array of available font families
84 // "á" , ?? a acute?
89 "°" // , // degrees
91 // "é" , // e ecute
92 // "ú" , // u ecute?
100 ihtml : '<table><tr><td>Cell</td></tr></table>'
104 text: "Insert Image",
107 ihtml : '<img src="about:blank"/>'
116 "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
117 "input:submit", "input:button", "select", "textarea", "label" ],
120 ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
122 ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
130 * @cfg {String} defaultFont default font to use.
132 defaultFont: 'tahoma',
139 init : function(editor)
141 this.editor = editor;
142 this.editorcore = editor.editorcore ? editor.editorcore : editor;
143 var editorcore = this.editorcore;
147 var fid = editorcore.frameId;
149 function btn(id, toggle, handler){
150 var xid = fid + '-'+ id ;
154 cls : 'x-btn-icon x-edit-'+id,
155 enableToggle:toggle !== false,
156 scope: editorcore, // was editor...
157 handler:handler||editorcore.relayBtnCmd,
158 clickEvent:'mousedown',
159 tooltip: etb.buttonTips[id] || undefined, ///tips ???
166 var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
169 tb.el.on('click', function(e){
170 e.preventDefault(); // what does this do?
173 if(!this.disable.font) { // && !Roo.isSafari){
174 /* why no safari for fonts
175 editor.fontSelect = tb.el.createChild({
179 html: this.createFontOptions()
182 editor.fontSelect.on('change', function(){
183 var font = editor.fontSelect.dom.value;
184 editor.relayCmd('fontname', font);
189 editor.fontSelect.dom,
195 if(!this.disable.formats){
196 this.formatCombo = new Roo.form.ComboBox({
197 store: new Roo.data.SimpleStore({
200 data : this.formats // from states.js
204 //autoCreate : {tag: "div", size: "20"},
209 triggerAction: 'all',
214 'select': function(c, r, i) {
215 editorcore.insertTag(r.get('tag'));
221 tb.addField(this.formatCombo);
225 if(!this.disable.format){
232 if(!this.disable.fontSize){
237 btn('increasefontsize', false, editorcore.adjustFont),
238 btn('decreasefontsize', false, editorcore.adjustFont)
243 if(!this.disable.colors){
246 id:editorcore.frameId +'-forecolor',
247 cls:'x-btn-icon x-edit-forecolor',
248 clickEvent:'mousedown',
249 tooltip: this.buttonTips['forecolor'] || undefined,
251 menu : new Roo.menu.ColorMenu({
256 selectHandler: function(cp, color){
257 editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
261 clickEvent:'mousedown'
264 id:editorcore.frameId +'backcolor',
265 cls:'x-btn-icon x-edit-backcolor',
266 clickEvent:'mousedown',
267 tooltip: this.buttonTips['backcolor'] || undefined,
269 menu : new Roo.menu.ColorMenu({
274 selectHandler: function(cp, color){
276 editorcore.execCmd('useCSS', false);
277 editorcore.execCmd('hilitecolor', color);
278 editorcore.execCmd('useCSS', true);
281 editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
282 Roo.isSafari || Roo.isIE ? '#'+color : color);
287 clickEvent:'mousedown'
292 // now add all the items...
295 if(!this.disable.alignments){
299 btn('justifycenter'),
305 if(!this.disable.links){
308 btn('createlink', false, editorcore.createLink) /// MOVE TO HERE?!!?!?!?!
312 if(!this.disable.lists){
315 btn('insertorderedlist'),
316 btn('insertunorderedlist')
319 if(!this.disable.sourceEdit){
322 btn('sourceedit', true, function(btn){
323 this.toggleSourceEdit(btn.pressed);
330 // special menu.. - needs to be tidied up..
331 if (!this.disable.special) {
340 for (var i =0; i < this.specialChars.length; i++) {
341 smenu.menu.items.push({
343 html: this.specialChars[i],
344 handler: function(a,b) {
345 editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
346 //editor.insertAtCursor(a.html);
360 if (!this.disable.cleanStyles) {
362 cls: 'x-btn-icon x-btn-clear',
368 for (var i =0; i < this.cleanStyles.length; i++) {
369 cmenu.menu.items.push({
370 actiontype : this.cleanStyles[i],
371 html: 'Remove ' + this.cleanStyles[i],
372 handler: function(a,b) {
375 var c = Roo.get(editorcore.doc.body);
376 c.select('[style]').each(function(s) {
377 s.dom.style.removeProperty(a.actiontype);
388 if (!this.disable.specialElements) {
396 for (var i =0; i < this.specialElements.length; i++) {
397 semenu.menu.items.push(
399 handler: function(a,b) {
400 editor.insertAtCursor(this.ihtml);
402 }, this.specialElements[i])
414 for(var i =0; i< this.btns.length;i++) {
415 var b = Roo.factory(this.btns[i],Roo.form);
416 b.cls = 'x-edit-none';
417 b.scope = editorcore;
425 // disable everything...
427 this.tb.items.each(function(item){
428 if(item.id != editorcore.frameId+ '-sourceedit'){
432 this.rendered = true;
435 editor.on('editorevent', this.updateToolbar, this);
436 // other toolbars need to implement this..
437 //editor.on('editmodechange', this.updateToolbar, this);
443 * Protected method that will not generally be called directly. It triggers
444 * a toolbar update by reading the markup state of the current selection in the editor.
446 updateToolbar: function(){
448 if(!this.editorcore.activated){
449 this.editor.onFirstFocus();
453 var btns = this.tb.items.map,
454 doc = this.editorcore.doc,
455 frameId = this.editorcore.frameId;
457 if(!this.disable.font && !Roo.isSafari){
459 var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
460 if(name != this.fontSelect.dom.value){
461 this.fontSelect.dom.value = name;
465 if(!this.disable.format){
466 btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
467 btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
468 btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
470 if(!this.disable.alignments){
471 btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
472 btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
473 btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
475 if(!Roo.isSafari && !this.disable.lists){
476 btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
477 btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
480 var ans = this.editorcore.getAllAncestors();
481 if (this.formatCombo) {
484 var store = this.formatCombo.store;
485 this.formatCombo.setValue("");
486 for (var i =0; i < ans.length;i++) {
487 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
489 this.formatCombo.setValue(ans[i].tagName.toLowerCase());
497 // hides menus... - so this cant be on a menu...
498 Roo.menu.MenuMgr.hideAll();
500 //this.editorsyncValue();
504 createFontOptions : function(){
505 var buf = [], fs = this.fontFamilies, ff, lc;
509 for(var i = 0, len = fs.length; i< len; i++){
511 lc = ff.toLowerCase();
513 '<option value="',lc,'" style="font-family:',ff,';"',
514 (this.defaultFont == lc ? ' selected="true">' : '>'),
522 toggleSourceEdit : function(sourceEditMode){
523 if(sourceEditMode === undefined){
524 sourceEditMode = !this.sourceEditMode;
526 this.sourceEditMode = sourceEditMode === true;
527 var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
528 // just toggle the button?
529 if(btn.pressed !== this.editorcore.sourceEditMode){
530 btn.toggle(this.editorcore.sourceEditMode);
534 if(this.editorcore.sourceEditMode){
535 this.tb.items.each(function(item){
536 if(item.cmd != 'sourceedit'){
542 if(this.initialized){
543 this.tb.items.each(function(item){
549 Roo.log("calling toggole on editor");
550 // tell the editor that it's been pressed..
551 this.editor.toggleSourceEdit(sourceEditMode);
555 * Object collection of toolbar tooltips for the buttons in the editor. The key
556 * is the command id associated with that button and the value is a valid QuickTips object.
561 title: 'Bold (Ctrl+B)',
562 text: 'Make the selected text bold.',
563 cls: 'x-html-editor-tip'
566 title: 'Italic (Ctrl+I)',
567 text: 'Make the selected text italic.',
568 cls: 'x-html-editor-tip'
576 title: 'Bold (Ctrl+B)',
577 text: 'Make the selected text bold.',
578 cls: 'x-html-editor-tip'
581 title: 'Italic (Ctrl+I)',
582 text: 'Make the selected text italic.',
583 cls: 'x-html-editor-tip'
586 title: 'Underline (Ctrl+U)',
587 text: 'Underline the selected text.',
588 cls: 'x-html-editor-tip'
592 text: 'Increase the font size.',
593 cls: 'x-html-editor-tip'
596 title: 'Shrink Text',
597 text: 'Decrease the font size.',
598 cls: 'x-html-editor-tip'
601 title: 'Text Highlight Color',
602 text: 'Change the background color of the selected text.',
603 cls: 'x-html-editor-tip'
607 text: 'Change the color of the selected text.',
608 cls: 'x-html-editor-tip'
611 title: 'Align Text Left',
612 text: 'Align text to the left.',
613 cls: 'x-html-editor-tip'
616 title: 'Center Text',
617 text: 'Center text in the editor.',
618 cls: 'x-html-editor-tip'
621 title: 'Align Text Right',
622 text: 'Align text to the right.',
623 cls: 'x-html-editor-tip'
625 insertunorderedlist : {
626 title: 'Bullet List',
627 text: 'Start a bulleted list.',
628 cls: 'x-html-editor-tip'
630 insertorderedlist : {
631 title: 'Numbered List',
632 text: 'Start a numbered list.',
633 cls: 'x-html-editor-tip'
637 text: 'Make the selected text a hyperlink.',
638 cls: 'x-html-editor-tip'
641 title: 'Source Edit',
642 text: 'Switch to source editing mode.',
643 cls: 'x-html-editor-tip'
647 onDestroy : function(){
650 this.tb.items.each(function(item){
652 item.menu.removeAll();
654 item.menu.el.destroy();
662 onFirstFocus: function() {
663 this.tb.items.each(function(item){