[ckeditor] apply font size using execCommand

Question

Hi all,

var wgetFrame = window.frames[0]
wframeDoc = wgetFrame.document;

editor.focus();
editor.execCommand('bold');
wframeDoc.execCommand('forecolor',false,'#00ff00');
wframeDoc.execCommand('JustifyCenter', false, null);
wframeDoc.execCommand('fontsize', false, 15);

(i use the code above as a plugin in CKEditor)

bold, forecolor and JustifyCenter , they all rend corectly , the selected text is wrapped by a span element

but when applying the fontsize command , the selected goes inside the font element, i know this is correct, but it need it to be inside a span element

i need to know why bold, forecolor and JustifyCenter are wrapped by span and fontsize not !!

and also if there another way to apply this styles

( ps : i run those commands when ckeditor is initialized, even if the editort doesn't contain any text, when u write the style definied is applied )

---

CKEDITOR.editorConfig = function(config) {
CKEDITOR.addStylesSet('customStyles',
[
    { name: 'Header 1', element: 'h1' },
    { name: 'Header 2', element: 'h2' },
    { name: 'Header 3', element: 'h3' },
    { name: 'Text', element: 'p' },
    { name: 'Left Align', element: 'img', attributes: { 'class': 'ImageLeft'} },
    { name: 'Right Align', element: 'img', attributes: { 'class': 'ImageRight'} }
]);

};

can i apply editor.execCommand( "Header 1" ); ??

Answer 1

from

onClick : function( value )
            {
                editor.focus();
                editor.fire( 'saveSnapshot' );

                var style = styles[ value ];

                if ( this.getValue() == value )
                    style.remove( editor.document );
                else
                    style.apply( editor.document );

                editor.fire( 'saveSnapshot' );
            }

in _source\plugins\font\plugin.js i was able to find a way to do it, but it seem a bit long

editor.focus();

editor.fire('saveSnapshot');

var styles = new CKEDITOR.style({ element : 'span', styles : { 'font-size' : '#(size)' }, overrides : [ { element : 'font', attributes : { 'size' : null } } ] }, {size: '72px'});

styles.apply( editor.document ); editor.fire('saveSnapshot');

the problem that i get now , is with editor focus , when you lunch the editor u see the font size applied , but if u click on a element outside the editor and come back , the cursor leave span style="72px" and create a new P element