Download & Extend
CKEditor - WYSIWYG HTML editor » Issues

Setting config.stylesSet in Custom javascript configuration has no effect

Posted by syngi on September 22, 2011 at 12:28pm
Project:CKEditor - WYSIWYG HTML editor
Version:7.x-1.3
Component:Code
Category:bug report
Priority:normal
Assigned:Unassigned
Status:postponed (maintainer needs more info)

Issue Summary

When I set config.stylesSet in Custom javascript configuration in the Advanced options it has no effect.

For example :

config.stylesSet = [
    { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
];
Login or register to post comments

Comments

#1

Posted by michal_cksource on September 22, 2011 at 12:40pm
Status:active» postponed (maintainer needs more info)

To add your style to style drop down / select box please use "Predefined styles " and/or "Predefined styles path " options from CKEditor's profile configuration ("CSS" tab). Styles should be defined in JavaScript file. Please read description of those options in profile configuration. If you have more question please ask.

#2

Posted by syngi on September 22, 2011 at 1:58pm

This does work in the replace function, so I think it is misleading that it doesn't work there.

#3

Posted by SammMoney on January 19, 2012 at 12:32am

Am I not able to use a css files.

I'm completely confused.

Perhaps someone could help me out here if I post some of the code I have?

Below is the code I want to to show in the drop down. What is it that I have to do for that CSS to show up?

div.alert {
  margin: 10px 0;
  padding: 10px 15px 10px 80px;
  color: #333333;
  border-top: 1px dashed #FEC201;
  border-bottom: 1px dashed #FEC201;
  background: #FFEDB5 url(../images/alert.png) 15px 50% no-repeat;
}

Would it look like this?

config.stylesSet = [
    { name : 'CSS Style', element : 'span', attributes : { 'alert' : 'div.alert' } }

#4

Posted by seancr on January 25, 2012 at 11:10pm

I'm having trouble with this too; I just posted on IRC:

<du> it seems like ckeditor isn't acknowledging the different ckeditor.styles.js file I'm specifying, - I can edit the default one and the changes get picked up - but that's it. I'm trying to have two different text formats with two different ckeditors and two different sets of styles

I have also tried adding styles, as the initial starter of this thread did, with no success. To me, it seems like you can either add your styles to the ckeditor.styles.js in the module directory or ... have nothing. I've been poking around and doing a little debugging, trying to narrow the problem down, and there are indicators that support this.

I've:

  • Tried defining path to ckeditor.styles.js in several different ways, using the tokens, without the tokens, root relative paths, absolute URLs, pointing to an alternative file in the module directory, and pointing to a file in the theme directory - no success
  • I've also tried looking at the CKEditor API and seeing if I may manually specify the styles in the Custom Javascript Configuration but have had no success, some of these may be syntactically incorrect (sp?) but it shows you what i've tried:
    • CKEDITOR.addStylesSet( 'drupal', [ { } ] ); /* this will edit the styles; but all of the styles */
    • CKEDITOR.addStylesSet( 'custom', [ { } ] ); CKEDITOR.config.stylesSet = 'custom'; /*changed all style dropdowns (now can't reproduce) */
    • config.addStylesSet( 'custom', [ { } ] ); config.stylesSet = 'custom';
    • ... I've tried an exaustive amount of things...

#5

Posted by seancr on January 26, 2012 at 12:52am

Predefined Styles

Finally figured out by analyzing the CKEDITOR object in FireBug. If you add the following code to the "Custom JavaScript Configuration" it will load up different styles.

  config.stylesCombo_stylesSet = 'name:/path/to/styles.js';
  config.stylesSet = 'name:/path/to/styles.js';

Here's a breakdown of how that code works, or at least the parts you'll (you, the user (not module developer)) need to change.
"name" is the name of a set of styles added via CKEDITOR.addStylesSet( ..., example:

    CKEDITOR.addStylesSet( 'mynewstyles',
    [
     { name : 'My First Style', element : 'h2', attributes : { 'class' : 'subheading' } }
    ]);

This is similar to the default one, except, "drupal" is the default name.

Update: even though I was successful in accomplishing what I wanted, the forms on the CKEDITOR edit page do not appear to work correctly. Adding a path to different styles doesn't seem to make a difference.

#6

Posted by Jorenm on January 31, 2012 at 11:39pm

@seancr's suggestion worked like a charm for me.

All of these other suggestions had my .js file loading properly, but I'd get a "Uncaught TypeError: Cannot read property 'length' of null" and the styles wouldn't appear. This was with the default styles copied into my own file.

#7

Posted by altavis on April 16, 2012 at 1:30pm

sorry, different version