stylesheetparser using Generic CSS class

I understand the stylesheetparser is designed to only work with classes assigned to elements.

Example;

div.normalText { ... }

OR;

span.normalText { ... }

However, I would like to use Generic CSS Classes...

Example;

.normalText { ... }

The following code populates the styles dropdown with "generic" classes defined in an external stylesheet;

$('#myTextarea').ckeditor({
    extraPlugins:'stylesheetparser',
    stylesheetParser_skipSelectors:/(^body\.)/i,
    stylesheetParser_validSelectors:/\.\w+/,
    contentsCss:'/css/styles.css',
    stylesSet:[],
    toolbar:[['Bold','Italic','Underline','-','Styles','FontSize']]
});

The issue is that generic classes show up broken in the Styles Dropdown.... It shows the following format for each Dropdown Item;

< class="normalText">.normalText</>

Here is a screenshot;

It is very important to me to have the ability to utilize "Generic" classes...

Does anyone know a solution?

Attachments:

Styles Dropdown showing generic classes appears as broken

Thu, 08/09/2012 - 11:12

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: stylesheetparser using Generic CSS class

The problem is not the stylesheet parser, but the fact that the Styles system in CKEditor is meant to be used with known elements, it doesn't allow to create a generic Style that can be applied to any element.
So that little trick with the parser is useless, you need a far bigger change to do what you want.

Thu, 08/09/2012 - 11:29

1mb

Joined: 09/08/2012

Posts: 2

Re: stylesheetparser using Generic CSS class

I understand what you are saying.

But what I have so far works great! I mean, it applies the style to selected text in the editor just fine. The only issue is how it shows up in the dropdown box...

I can see exactly what is happening... it is using the defined element to create the html in the dropdown box... problem here is that there is no defined element.

I see a real easy fix, when no element is defined, use a span tag. This way the dropdown list will look correct.

Thoughts?

Thu, 08/09/2012 - 11:41

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: stylesheetparser using Generic CSS class

What happens if you try to use such style is that a span is generated, the class isn't applied to the existing element.

For example if I start with a table and then I select it and try to apply such style this is what I get:

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
   <tbody>
      <tr>
         <td>
            <span class="RedBold">1</span></td>
         <td>
            <span class="RedBold">2</span></td>
      </tr>
      <tr>
         <td>
            <span class="RedBold">3</span></td>
         <td>
            <span class="RedBold">4</span></td>
      </tr>
      <tr>
         <td>
            <span class="RedBold">5</span></td>
         <td>
            <span class="RedBold">6</span></td>
      </tr>
   </tbody>
</table>

instead of

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;" class="RedBold">
   <tbody>
      <tr>
         <td>
            1</td>
         <td>
            2</td>
      </tr>
      <tr>
         <td>
            3</td>
         <td>
            4</td>
      </tr>
      <tr>
         <td>
            5</td>
         <td>
            6</td>
      </tr>
   </tbody>
</table>

That would have been generated if the class was really applied to the table.

But if the first option is what you want, you just have to modify your copy of the parser so that it always defaults to a span element, that way you'll get what you want on the dropdown and the output will be the same (but certainly that's not what most of the people would understand as using a generic class, you can just put the span on your stylesheet and get the same outcome)