PDA

View Full Version : htmlEditor Heading Plugin



Dmoney
21 Jun 2011, 11:09 AM
This is my first attempt at a plugin. A simple plugin to insert heading tags in the htmlEditor. I have only tried it with chrome and firefox. If you have suggestions I would be happy to hear them. There was no easy way to remove the heading tags with a midas command so I used the <p> tag if none is selected. that functionality is fine for what I needed.


Ext.form.HtmlEditor.Heading = Ext.extend(Ext.form.HtmlEditor, {
init: function (a)
{
this.cmp = a;
this.cmp.on("render", this.onRender, this);
},
onRender: function ()
{



this.cmp.getToolbar().add(
{
xtype: 'combo',
displayField: 'name',
valueField: 'value',
queryMode: 'local',
name: 'headingsize',
id: 'headingsize',
forceSelection: true,
triggerAction: 'all',
width: 85,
emptyText: 'Heading',
listConfig: {
getInnerTpl: function() {
return '<div class="{hClass}">{name}</div>';

}
},
store: Ext.create('Ext.data.Store', {
fields: ['name', 'value', 'hClass'],
data: [
{
name: 'none',
value: '<p>',
hClass: ''
}, {
name: 'heading 1',
value: '<H1>',
hClass: 'heading1'
}, {
name: 'heading 2',
value: '<H2>',
hClass: 'heading2'
}

]
}),
listeners: {
'select': function (combo, record)
{

var selHeading = record[0].get('value');
this.cmp.relayCmd('formatblock', selHeading);
var cc = Ext.getCmp('headingsize');
this.cmp.getToolbar().focus();
this.cmp.deferFocus();
cc.reset();

},
scope: this
}
});
}
});

Dmoney
21 Jun 2011, 12:58 PM
Screen Shot

posta
21 Jun 2011, 1:51 PM
Perfect!

Dmoney
21 Jun 2011, 2:30 PM
I should mention that if you are styling the headings like I am. and you want to make the editor text reflect the way the text will look on the site you can use something like this :



Ext.override(Ext.form.HtmlEditor, {
cssRules : 'h1{font-size:16px;font-weight:bold;color:green;}',
getDocMarkup : function(){
return '<html><head><style type="text/css">' + this.cssRules + '</style>' +
(this.stylesheet ? '<link rel="stylesheet" type="text/css" href="' + this.stylesheet + '" />' : '') +
'</head><body></body></html>';
}
});

googi
3 Aug 2011, 5:42 PM
hi, could you show your code of how to use this plugin ?that would be greate help for me