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
68 * @cfg {String} createLinkText The default text for the create link prompt
70 createLinkText : 'Please enter the URL for the link:',
72 * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
74 defaultLinkValue : 'http:/'+'/',
78 * @cfg {Array} fontFamilies An array of available font families
96 // "á" , ?? a acute?
101 "°" // , // degrees
103 // "é" , // e ecute
104 // "ú" , // u ecute?
109 text: "Insert Table",
112 ihtml : '<table><tr><td>Cell</td></tr></table>'
116 text: "Insert Image",
119 ihtml : '<img src="about:blank"/>'
128 "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
129 "input:submit", "input:button", "select", "textarea", "label" ],
132 ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
134 ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
143 * @cfg {String} defaultFont default font to use.
145 defaultFont: 'tahoma',
152 init : function(editor)
154 this.editor = editor;
155 this.editorcore = editor.editorcore ? editor.editorcore : editor;
156 var editorcore = this.editorcore;
160 var fid = editorcore.frameId;
162 function btn(id, toggle, handler){
163 var xid = fid + '-'+ id ;
167 cls : 'x-btn-icon x-edit-'+id,
168 enableToggle:toggle !== false,
169 scope: _t, // was editor...
170 handler:handler||_t.relayBtnCmd,
171 clickEvent:'mousedown',
172 tooltip: etb.buttonTips[id] || undefined, ///tips ???
179 var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
182 tb.el.on('click', function(e){
183 e.preventDefault(); // what does this do?
186 if(!this.disable.font) { // && !Roo.isSafari){
187 /* why no safari for fonts
188 editor.fontSelect = tb.el.createChild({
192 html: this.createFontOptions()
195 editor.fontSelect.on('change', function(){
196 var font = editor.fontSelect.dom.value;
197 editor.relayCmd('fontname', font);
202 editor.fontSelect.dom,
208 if(!this.disable.formats){
209 this.formatCombo = new Roo.form.ComboBox({
210 store: new Roo.data.SimpleStore({
213 data : this.formats // from states.js
217 //autoCreate : {tag: "div", size: "20"},
222 triggerAction: 'all',
227 'select': function(c, r, i) {
228 editorcore.insertTag(r.get('tag'));
234 tb.addField(this.formatCombo);
238 if(!this.disable.format){
246 if(!this.disable.fontSize){
251 btn('increasefontsize', false, editorcore.adjustFont),
252 btn('decreasefontsize', false, editorcore.adjustFont)
257 if(!this.disable.colors){
260 id:editorcore.frameId +'-forecolor',
261 cls:'x-btn-icon x-edit-forecolor',
262 clickEvent:'mousedown',
263 tooltip: this.buttonTips['forecolor'] || undefined,
265 menu : new Roo.menu.ColorMenu({
270 selectHandler: function(cp, color){
271 editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
275 clickEvent:'mousedown'
278 id:editorcore.frameId +'backcolor',
279 cls:'x-btn-icon x-edit-backcolor',
280 clickEvent:'mousedown',
281 tooltip: this.buttonTips['backcolor'] || undefined,
283 menu : new Roo.menu.ColorMenu({
288 selectHandler: function(cp, color){
290 editorcore.execCmd('useCSS', false);
291 editorcore.execCmd('hilitecolor', color);
292 editorcore.execCmd('useCSS', true);
295 editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
296 Roo.isSafari || Roo.isIE ? '#'+color : color);
301 clickEvent:'mousedown'
306 // now add all the items...
309 if(!this.disable.alignments){
313 btn('justifycenter'),
319 if(!this.disable.links){
322 btn('createlink', false, this.createLink) /// MOVE TO HERE?!!?!?!?!
326 if(!this.disable.lists){
329 btn('insertorderedlist'),
330 btn('insertunorderedlist')
333 if(!this.disable.sourceEdit){
336 btn('sourceedit', true, function(btn){
337 this.toggleSourceEdit(btn.pressed);
344 // special menu.. - needs to be tidied up..
345 if (!this.disable.special) {
354 for (var i =0; i < this.specialChars.length; i++) {
355 smenu.menu.items.push({
357 html: this.specialChars[i],
358 handler: function(a,b) {
359 editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
360 //editor.insertAtCursor(a.html);
374 if (!this.disable.cleanStyles) {
376 cls: 'x-btn-icon x-btn-clear',
382 for (var i =0; i < this.cleanStyles.length; i++) {
383 cmenu.menu.items.push({
384 actiontype : this.cleanStyles[i],
385 html: 'Remove ' + this.cleanStyles[i],
386 handler: function(a,b) {
389 var c = Roo.get(editorcore.doc.body);
390 c.select('[style]').each(function(s) {
391 s.dom.style.removeProperty(a.actiontype);
393 editorcore.syncValue();
398 cmenu.menu.items.push({
399 actiontype : 'tablewidths',
400 html: 'Remove Table Widths',
401 handler: function(a,b) {
402 editorcore.cleanTableWidths();
403 editorcore.syncValue();
407 cmenu.menu.items.push({
409 html: 'Remove MS Word Formating',
410 handler: function(a,b) {
411 editorcore.cleanWord();
412 editorcore.syncValue();
417 cmenu.menu.items.push({
419 html: 'Remove All Styles',
420 handler: function(a,b) {
422 var c = Roo.get(editorcore.doc.body);
423 c.select('[style]').each(function(s) {
424 s.dom.removeAttribute('style');
426 editorcore.syncValue();
431 cmenu.menu.items.push({
433 html: 'Remove All CSS Classes',
434 handler: function(a,b) {
436 var c = Roo.get(editorcore.doc.body);
437 c.select('[class]').each(function(s) {
438 s.dom.removeAttribute('class');
440 editorcore.cleanWord();
441 editorcore.syncValue();
446 cmenu.menu.items.push({
448 html: 'Tidy HTML Source',
449 handler: function(a,b) {
450 new Roo.htmleditor.Tidy(editorcore.doc.body);
451 editorcore.syncValue();
460 if (!this.disable.specialElements) {
468 for (var i =0; i < this.specialElements.length; i++) {
469 semenu.menu.items.push(
471 handler: function(a,b) {
472 editor.insertAtCursor(this.ihtml);
474 }, this.specialElements[i])
486 for(var i =0; i< this.btns.length;i++) {
487 var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
488 b.cls = 'x-edit-none';
490 if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
491 b.cls += ' x-init-enable';
494 b.scope = editorcore;
502 // disable everything...
504 this.tb.items.each(function(item){
507 item.id != editorcore.frameId+ '-sourceedit' &&
508 (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
514 this.rendered = true;
517 editor.on('editorevent', this.updateToolbar, this);
518 // other toolbars need to implement this..
519 //editor.on('editmodechange', this.updateToolbar, this);
523 relayBtnCmd : function(btn) {
524 this.editorcore.relayCmd(btn.cmd);
526 // private used internally
527 createLink : function(){
528 //Roo.log("create link?");
529 var ec = this.editorcore;
530 Roo.MessageBox.prompt("Add Link URL",this.createLinkText, function(btn, url) {
534 if(url && url != 'http:/'+'/'){
535 ec.relayCmd('createlink', url);
543 * Protected method that will not generally be called directly. It triggers
544 * a toolbar update by reading the markup state of the current selection in the editor.
546 updateToolbar: function(){
548 if(!this.editorcore.activated){
549 this.editor.onFirstFocus();
553 var btns = this.tb.items.map,
554 doc = this.editorcore.doc,
555 frameId = this.editorcore.frameId;
557 if(!this.disable.font && !Roo.isSafari){
559 var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
560 if(name != this.fontSelect.dom.value){
561 this.fontSelect.dom.value = name;
565 if(!this.disable.format){
566 btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
567 btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
568 btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
569 btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
571 if(!this.disable.alignments){
572 btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
573 btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
574 btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
576 if(!Roo.isSafari && !this.disable.lists){
577 btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
578 btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
581 var ans = this.editorcore.getAllAncestors();
582 if (this.formatCombo) {
585 var store = this.formatCombo.store;
586 this.formatCombo.setValue("");
587 for (var i =0; i < ans.length;i++) {
588 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
590 this.formatCombo.setValue(ans[i].tagName.toLowerCase());
598 // hides menus... - so this cant be on a menu...
599 Roo.menu.MenuMgr.hideAll();
601 //this.editorsyncValue();
605 createFontOptions : function(){
606 var buf = [], fs = this.fontFamilies, ff, lc;
610 for(var i = 0, len = fs.length; i< len; i++){
612 lc = ff.toLowerCase();
614 '<option value="',lc,'" style="font-family:',ff,';"',
615 (this.defaultFont == lc ? ' selected="true">' : '>'),
623 toggleSourceEdit : function(sourceEditMode){
625 Roo.log("toolbar toogle");
626 if(sourceEditMode === undefined){
627 sourceEditMode = !this.sourceEditMode;
629 this.sourceEditMode = sourceEditMode === true;
630 var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
631 // just toggle the button?
632 if(btn.pressed !== this.sourceEditMode){
633 btn.toggle(this.sourceEditMode);
638 Roo.log("disabling buttons");
639 this.tb.items.each(function(item){
640 if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
646 Roo.log("enabling buttons");
647 if(this.editorcore.initialized){
648 this.tb.items.each(function(item){
651 // initialize 'blocks'
652 Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
653 Roo.htmleditor.Block.factory(e).updateElement(e);
659 Roo.log("calling toggole on editor");
660 // tell the editor that it's been pressed..
661 this.editor.toggleSourceEdit(sourceEditMode);
665 * Object collection of toolbar tooltips for the buttons in the editor. The key
666 * is the command id associated with that button and the value is a valid QuickTips object.
671 title: 'Bold (Ctrl+B)',
672 text: 'Make the selected text bold.',
673 cls: 'x-html-editor-tip'
676 title: 'Italic (Ctrl+I)',
677 text: 'Make the selected text italic.',
678 cls: 'x-html-editor-tip'
686 title: 'Bold (Ctrl+B)',
687 text: 'Make the selected text bold.',
688 cls: 'x-html-editor-tip'
691 title: 'Italic (Ctrl+I)',
692 text: 'Make the selected text italic.',
693 cls: 'x-html-editor-tip'
696 title: 'Underline (Ctrl+U)',
697 text: 'Underline the selected text.',
698 cls: 'x-html-editor-tip'
701 title: 'Strikethrough',
702 text: 'Strikethrough the selected text.',
703 cls: 'x-html-editor-tip'
707 text: 'Increase the font size.',
708 cls: 'x-html-editor-tip'
711 title: 'Shrink Text',
712 text: 'Decrease the font size.',
713 cls: 'x-html-editor-tip'
716 title: 'Text Highlight Color',
717 text: 'Change the background color of the selected text.',
718 cls: 'x-html-editor-tip'
722 text: 'Change the color of the selected text.',
723 cls: 'x-html-editor-tip'
726 title: 'Align Text Left',
727 text: 'Align text to the left.',
728 cls: 'x-html-editor-tip'
731 title: 'Center Text',
732 text: 'Center text in the editor.',
733 cls: 'x-html-editor-tip'
736 title: 'Align Text Right',
737 text: 'Align text to the right.',
738 cls: 'x-html-editor-tip'
740 insertunorderedlist : {
741 title: 'Bullet List',
742 text: 'Start a bulleted list.',
743 cls: 'x-html-editor-tip'
745 insertorderedlist : {
746 title: 'Numbered List',
747 text: 'Start a numbered list.',
748 cls: 'x-html-editor-tip'
752 text: 'Make the selected text a hyperlink.',
753 cls: 'x-html-editor-tip'
756 title: 'Source Edit',
757 text: 'Switch to source editing mode.',
758 cls: 'x-html-editor-tip'
762 onDestroy : function(){
765 this.tb.items.each(function(item){
767 item.menu.removeAll();
769 item.menu.el.destroy();
777 onFirstFocus: function() {
778 this.tb.items.each(function(item){