CODEWITHSUNDEEP
phpjavascriptckeditor
user875293
user875293

Reputation: 679

how to load styles into ckeditor?

How do I load styles from a style sheet into ckeditor's style list?

Is it possible?

I have tried putting this in the config.js file but it doesnt load any styles into the editors list

config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/style.css';

Maybe Im not creating my styles right in the style sheet? Is there something im missing?

Upvotes: 1

Views: 2929

Answers (2)

adenizc
adenizc

Reputation: 421

Yes it's possible. you can find detailed information from this URL

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

For example;

Firstly, add "my_styles" css styles to CKEDITOR.stylesSet in plugins/styles/plugin.js

The following code shows how to register a sample style definition. 

CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block-level styles
    { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
    { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },

    // Inline styles
    { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
]);

When the definitions are ready, you must instruct the editor to apply the newly registered styles by using the stylesSet setting. This may be set in the config.js file, for example:

config.js

config.stylesSet = 'my_styles';

Upvotes: 2

AlfonsoML
AlfonsoML

Reputation: 12690

It depends on the contents of that style.css file. The Style sheet parser plugin uses only the rules that specify both an element and a class so you can use this:

p.red { color:red; padding:1em }

But these other ones won't be recognized by the plugin (you would need to customize it)

p {color:red; padding:1em}
.red {color:red; padding:1em}
#red {color:red; padding:1em}

Upvotes: 1

Related Questions