1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    168
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default htmlEditor Heading Plugin

    htmlEditor Heading Plugin


    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
                }
            });
        }
    });

  2. #2
    Sencha User
    Join Date
    May 2010
    Posts
    168
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    Screen Shot
    Attached Images

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    12
    Vote Rating
    0
    posta is on a distinguished road

      0  

    Thumbs up


    Perfect!

  4. #4
    Sencha User
    Join Date
    May 2010
    Posts
    168
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    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>';
      }
    });
    Attached Images

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    2
    Vote Rating
    0
    googi is on a distinguished road

      0  

    Red face


    hi, could you show your code of how to use this plugin ?that would be greate help for me

Thread Participants: 2

Tags for this Thread