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.

Code:

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 :

Code:

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

htmlEditor Heading Plugin

Thread Tools

Search Thread

Display

htmlEditor Heading Plugin

htmlEditor Heading Plugin

Tags for this Thread