Roo.form.HtmlEditor.ToolbarStandard = function(config)
{
Roo.apply(this, config);
this.disable = this.disable || {};
Roo.applyIf(this.disable, {
fontSize : true,
colors : true,
specialElements : true
});
}
Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype, {
tb: false,
rendered: false,
editor : false,
editorcore : false,
disable : false,
createLinkText : 'Please enter the URL for the link:',
defaultLinkValue : 'http:/'+'/',
fontFamilies : [
'Arial',
'Courier New',
'Tahoma',
'Times New Roman',
'Verdana'
],
specialChars : [
"©",
"®",
"™",
"£" ,
"…",
"÷" ,
"€" , "°" ],
specialElements : [
{
text: "Insert Table",
xtype: 'MenuItem',
xns : Roo.Menu,
ihtml : '<table><tr><td>Cell</td></tr></table>'
},
{
text: "Insert Image",
xtype: 'MenuItem',
xns : Roo.Menu,
ihtml : '<img src="about:blank"/>'
}
],
inputElements : [
"form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password",
"input:submit", "input:button", "select", "textarea", "label" ],
formats : [
["p"] ,
["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],
["pre"],[ "code"],
["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
['div'],['span'],
['sup'],['sub']
],
cleanStyles : [
"font-size"
],
defaultFont: 'tahoma',
fontSelect : false,
formatCombo : false,
init : function(editor)
{
this.editor = editor;
this.editorcore = editor.editorcore ? editor.editorcore : editor;
var editorcore = this.editorcore;
var _t = this;
var fid = editorcore.frameId;
var etb = this;
function btn(id, toggle, handler){
var xid = fid + '-'+ id ;
return {
id : xid,
cmd : id,
cls : 'x-btn-icon x-edit-'+id,
enableToggle:toggle !== false,
scope: _t, handler:handler||_t.relayBtnCmd,
clickEvent:'mousedown',
tooltip: etb.buttonTips[id] || undefined, tabIndex:-1
};
}
var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
this.tb = tb;
tb.el.on('click', function(e){
e.preventDefault(); });
if(!this.disable.font) { };
if(!this.disable.formats){
this.formatCombo = new Roo.form.ComboBox({
store: new Roo.data.SimpleStore({
id : 'tag',
fields: ['tag'],
data : this.formats }),
blockFocus : true,
name : '',
displayField:'tag',
typeAhead: false,
mode: 'local',
editable : false,
triggerAction: 'all',
emptyText:'Add tag',
selectOnFocus:true,
width:135,
listeners : {
'select': function(c, r, i) {
editorcore.insertTag(r.get('tag'));
editor.focus();
}
}
});
tb.addField(this.formatCombo);
}
if(!this.disable.format){
tb.add(
btn('bold'),
btn('italic'),
btn('underline'),
btn('strikethrough')
);
};
if(!this.disable.fontSize){
tb.add(
'-',
btn('increasefontsize', false, editorcore.adjustFont),
btn('decreasefontsize', false, editorcore.adjustFont)
);
};
if(!this.disable.colors){
tb.add(
'-', {
id:editorcore.frameId +'-forecolor',
cls:'x-btn-icon x-edit-forecolor',
clickEvent:'mousedown',
tooltip: this.buttonTips['forecolor'] || undefined,
tabIndex:-1,
menu : new Roo.menu.ColorMenu({
allowReselect: true,
focus: Roo.emptyFn,
value:'000000',
plain:true,
selectHandler: function(cp, color){
editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
editor.deferFocus();
},
scope: editorcore,
clickEvent:'mousedown'
})
}, {
id:editorcore.frameId +'backcolor',
cls:'x-btn-icon x-edit-backcolor',
clickEvent:'mousedown',
tooltip: this.buttonTips['backcolor'] || undefined,
tabIndex:-1,
menu : new Roo.menu.ColorMenu({
focus: Roo.emptyFn,
value:'FFFFFF',
plain:true,
allowReselect: true,
selectHandler: function(cp, color){
if(Roo.isGecko){
editorcore.execCmd('useCSS', false);
editorcore.execCmd('hilitecolor', color);
editorcore.execCmd('useCSS', true);
editor.deferFocus();
}else{
editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor',
Roo.isSafari || Roo.isIE ? '#'+color : color);
editor.deferFocus();
}
},
scope:editorcore,
clickEvent:'mousedown'
})
}
);
};
if(!this.disable.alignments){
tb.add(
'-',
btn('justifyleft'),
btn('justifycenter'),
btn('justifyright')
);
};
if(!this.disable.links){
tb.add(
'-',
btn('createlink', false, this.createLink) );
};
if(!this.disable.lists){
tb.add(
'-',
btn('insertorderedlist'),
btn('insertunorderedlist')
);
}
if(!this.disable.sourceEdit){
tb.add(
'-',
btn('sourceedit', true, function(btn){
this.toggleSourceEdit(btn.pressed);
})
);
}
var smenu = { };
if (!this.disable.special) {
smenu = {
text: "©",
cls: 'x-edit-none',
menu : {
items : []
}
};
for (var i =0; i < this.specialChars.length; i++) {
smenu.menu.items.push({
html: this.specialChars[i],
handler: function(a,b) {
editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
},
tabIndex:-1
});
}
tb.add(smenu);
}
var cmenu = { };
if (!this.disable.cleanStyles) {
cmenu = {
cls: 'x-btn-icon x-btn-clear',
menu : {
items : []
}
};
for (var i =0; i < this.cleanStyles.length; i++) {
cmenu.menu.items.push({
actiontype : this.cleanStyles[i],
html: 'Remove ' + this.cleanStyles[i],
handler: function(a,b) {
var c = Roo.get(editorcore.doc.body);
c.select('[style]').each(function(s) {
s.dom.style.removeProperty(a.actiontype);
});
editorcore.syncValue();
},
tabIndex:-1
});
}
cmenu.menu.items.push({
actiontype : 'tablewidths',
html: 'Remove Table Widths',
handler: function(a,b) {
editorcore.cleanTableWidths();
editorcore.syncValue();
},
tabIndex:-1
});
cmenu.menu.items.push({
actiontype : 'word',
html: 'Remove MS Word Formating',
handler: function(a,b) {
editorcore.cleanWord();
editorcore.syncValue();
},
tabIndex:-1
});
cmenu.menu.items.push({
actiontype : 'all',
html: 'Remove All Styles',
handler: function(a,b) {
var c = Roo.get(editorcore.doc.body);
c.select('[style]').each(function(s) {
s.dom.removeAttribute('style');
});
editorcore.syncValue();
},
tabIndex:-1
});
cmenu.menu.items.push({
actiontype : 'all',
html: 'Remove All CSS Classes',
handler: function(a,b) {
var c = Roo.get(editorcore.doc.body);
c.select('[class]').each(function(s) {
s.dom.removeAttribute('class');
});
editorcore.cleanWord();
editorcore.syncValue();
},
tabIndex:-1
});
cmenu.menu.items.push({
actiontype : 'tidy',
html: 'Tidy HTML Source',
handler: function(a,b) {
editorcore.doc.body.innerHTML = editorcore.domToHTML();
editorcore.syncValue();
},
tabIndex:-1
});
tb.add(cmenu);
}
if (!this.disable.specialElements) {
var semenu = {
text: "Other;",
cls: 'x-edit-none',
menu : {
items : []
}
};
for (var i =0; i < this.specialElements.length; i++) {
semenu.menu.items.push(
Roo.apply({
handler: function(a,b) {
editor.insertAtCursor(this.ihtml);
}
}, this.specialElements[i])
);
}
tb.add(semenu);
}
if (this.btns) {
for(var i =0; i< this.btns.length;i++) {
var b = Roo.factory(this.btns[i],Roo.form);
b.cls = 'x-edit-none';
if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
b.cls += ' x-init-enable';
}
b.scope = editorcore;
tb.add(b);
}
}
this.tb.items.each(function(item){
if(
item.id != editorcore.frameId+ '-sourceedit' &&
(typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
){
item.disable();
}
});
this.rendered = true;
editor.on('editorevent', this.updateToolbar, this);
},
relayBtnCmd : function(btn) {
this.editorcore.relayCmd(btn.cmd);
},
createLink : function(){
Roo.log("create link?");
var url = prompt(this.createLinkText, this.defaultLinkValue);
if(url && url != 'http:/'+'/'){
this.editorcore.relayCmd('createlink', url);
}
},
updateToolbar: function(){
if(!this.editorcore.activated){
this.editor.onFirstFocus();
return;
}
var btns = this.tb.items.map,
doc = this.editorcore.doc,
frameId = this.editorcore.frameId;
if(!this.disable.font && !Roo.isSafari){
}
if(!this.disable.format){
btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
}
if(!this.disable.alignments){
btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
}
if(!Roo.isSafari && !this.disable.lists){
btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
}
var ans = this.editorcore.getAllAncestors();
if (this.formatCombo) {
var store = this.formatCombo.store;
this.formatCombo.setValue("");
for (var i =0; i < ans.length;i++) {
if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
this.formatCombo.setValue(ans[i].tagName.toLowerCase());
break;
}
}
}
Roo.menu.MenuMgr.hideAll();
},
createFontOptions : function(){
var buf = [], fs = this.fontFamilies, ff, lc;
for(var i = 0, len = fs.length; i< len; i++){
ff = fs[i];
lc = ff.toLowerCase();
buf.push(
'<option value="',lc,'" style="font-family:',ff,';"',
(this.defaultFont == lc ? ' selected="true">' : '>'),
ff,
'</option>'
);
}
return buf.join('');
},
toggleSourceEdit : function(sourceEditMode){
Roo.log("toolbar toogle");
if(sourceEditMode === undefined){
sourceEditMode = !this.sourceEditMode;
}
this.sourceEditMode = sourceEditMode === true;
var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
if(btn.pressed !== this.sourceEditMode){
btn.toggle(this.sourceEditMode);
return;
}
if(sourceEditMode){
Roo.log("disabling buttons");
this.tb.items.each(function(item){
if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
item.disable();
}
});
}else{
Roo.log("enabling buttons");
if(this.editorcore.initialized){
this.tb.items.each(function(item){
item.enable();
});
}
}
Roo.log("calling toggole on editor");
this.editor.toggleSourceEdit(sourceEditMode);
},
buttonTips : {
bold : {
title: 'Bold (Ctrl+B)',
text: 'Make the selected text bold.',
cls: 'x-html-editor-tip'
},
italic : {
title: 'Italic (Ctrl+I)',
text: 'Make the selected text italic.',
cls: 'x-html-editor-tip'
},
underline : {
title: 'Underline (Ctrl+U)',
text: 'Underline the selected text.',
cls: 'x-html-editor-tip'
},
strikethrough : {
title: 'Strikethrough',
text: 'Strikethrough the selected text.',
cls: 'x-html-editor-tip'
},
increasefontsize : {
title: 'Grow Text',
text: 'Increase the font size.',
cls: 'x-html-editor-tip'
},
decreasefontsize : {
title: 'Shrink Text',
text: 'Decrease the font size.',
cls: 'x-html-editor-tip'
},
backcolor : {
title: 'Text Highlight Color',
text: 'Change the background color of the selected text.',
cls: 'x-html-editor-tip'
},
forecolor : {
title: 'Font Color',
text: 'Change the color of the selected text.',
cls: 'x-html-editor-tip'
},
justifyleft : {
title: 'Align Text Left',
text: 'Align text to the left.',
cls: 'x-html-editor-tip'
},
justifycenter : {
title: 'Center Text',
text: 'Center text in the editor.',
cls: 'x-html-editor-tip'
},
justifyright : {
title: 'Align Text Right',
text: 'Align text to the right.',
cls: 'x-html-editor-tip'
},
insertunorderedlist : {
title: 'Bullet List',
text: 'Start a bulleted list.',
cls: 'x-html-editor-tip'
},
insertorderedlist : {
title: 'Numbered List',
text: 'Start a numbered list.',
cls: 'x-html-editor-tip'
},
createlink : {
title: 'Hyperlink',
text: 'Make the selected text a hyperlink.',
cls: 'x-html-editor-tip'
},
sourceedit : {
title: 'Source Edit',
text: 'Switch to source editing mode.',
cls: 'x-html-editor-tip'
}
},
onDestroy : function(){
if(this.rendered){
this.tb.items.each(function(item){
if(item.menu){
item.menu.removeAll();
if(item.menu.el){
item.menu.el.destroy();
}
}
item.destroy();
});
}
},
onFirstFocus: function() {
this.tb.items.each(function(item){
item.enable();
});
}
});