CODEWITHSUNDEEP
javascriptcssckeditor
Leoh
Leoh

Reputation: 670

change the <span style> of ckeditor

i use ckeditor in texareas of my form, but the background of the site is black so i want to change the default style. i have the basic toolbar:

CKEDITOR.replace( 'editor1',
 {  
    toolbar : [ [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-',
 'Link', 'Unlink','-']]

 });

the span style that i want to change is (the default):

<span style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-size: 11px;  
line-height: 14px; text-align: justify; ">

where I can change the default values??

Upvotes: 0

Views: 1896

Answers (2)

oleq
oleq

Reputation: 15895

What you want to do is use a custom style:

CKEDITOR.addStyleSet( 'myStyles', [
    {
        name: 'Custom span',
        element: 'span',
        styles:
        {
            'color': 'rgb(0,0,0)',
            'font-family': 'Arial, Helvetica, sans',
            'font-size': '11px',
            'line-height': '14px',
            'text-align': 'justify'
        }
    }
]);

CKEDITOR.replace( 'editor1', { styleSet: 'myStyles:/styles.js' } )

See: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles

Upvotes: 1

Sujeet
Sujeet

Reputation: 1800

<textarea cols="100" id="editor1" name="editor1" rows="10">This is some sample text</textarea>

<script type="text/javascript">
    // Replace the <textarea id="editor1"> with an CKEditor instance.
    var editor = CKEDITOR.replace( 'editor1' );
    editor.on( 'instanceReady', function( ev ){
        //set the background properties
                this.document.$.childNodes[1].childNodes[1].style.backgroundColor = 'Blue';

                editor.focus();
        });
</script>

Upvotes: 0

Related Questions