Parse stylesheet to make styles list

[poeg@…]

I would like it if the editor parsed the stylesheet defined in FCKConfig.EditorAreaCSS (or another stylesheet) and made its styles list with that instead of having to make a seperate XML Styles file.

---

Moved from SF:
​http://sourceforge.net/tracker/index.php?func=detail&aid=1498014&group_id=75348&atid=543656

[Martin Kou]

​https://sourceforge.net/tracker/index.php?func=detail&aid=888483&group_id=75348&atid=543656 ​https://sourceforge.net/tracker/index.php?func=detail&aid=945514&group_id=75348&atid=543656 have been marked as duplicate of this bug.

This plugin does implement this request: ​https://sourceforge.net/tracker/index.php?func=detail&aid=1448301&group_id=75348&atid=737639

---

Moved from SF. Original poster: alfonsoml

[Frederico Caldeira Knabben]

The 2.5 is about to be released. No new important features will be added to it. Postponing.

[Frederico Caldeira Knabben]

For reference : wiki:Components/Styles#CSSFile?

[Alfonso Martínez de Lizarrondo]

i had the same problem and i did the following:

in my asp file that invokes this great editor, add a css stylesheet in the head section:

<LINK REL="STYLESHEET" TYPE="text/css" HREF="<%=CSS%>"/>

In my case i have decided that the css is a param of the page, so i can use the stylesheet if certain conditions are executed.

and i have modified the js/fck_config.js file substituting:

//##
//## Style Names
//##
config.StyleNames = ';Main Header;Blue Title;Centered Title' ;
config.StyleValues = ';MainHeader;BlueTitle;CenteredTitle' ;

by the following code:

//##
//## Style Names
//##
// kazador: 24/05/2004
if (!parent.document.styleSheets)
{
config.StyleNames = ';Main Header;Blue Title;Centered Title' ;
config.StyleValues = ';MainHeader;BlueTitle;CenteredTitle' ;
}
else
{
var valores='';
var regla='';
var oStyleSheet=parent.document.styleSheets[0].rules;
for (var j=0;j<oStyleSheet.length-1;j++)
{
regla=oStyleSheet[j].selectorText;
if (regla.indexOf(':')==-1) {
valores=valores+';'+regla.substring(1,oStyleSheet[j].length); }
}
config.StyleNames = valores ;
config.StyleValues = valores ;
}
// fin kazador: 24/05/2004

in this way, if i dont pass any value to css variable at first page, i use default style definition; if not i use my own css and show it in combobox. The little parsing is to avoid show the event of class (:hover, etc) and eliminate the dot at begining of class.

---

Moved from ​sourceforge
Original author: kazador

[Alfonso Martínez de Lizarrondo]

I needed to include in the Style combo box the styles of a given CSS file so i modified 2 files:

• fckEditor.php, implementing new variables
• test.php, for example purposes

I think the comments should be self explaining.

---

Moved from ​sourceforge
Original Author Arnaud Saint-Paul

[Alfonso Martínez de Lizarrondo]

Thank 4 this great add-on

Tips : don't forget to put the complete css path in the $oFCKeditor->EditorAreaCSS variable (it was the only missing point to be able to use this great work)

Regards,
Simon (France)

---

Moved from sourceforge Original author gazou78

[Frederico Caldeira Knabben]

Milestone CKEditor 3.x deleted

[Alfonso Martínez de Lizarrondo]

Proposed patch

[Alfonso Martínez de Lizarrondo]

This plugin performs the task, and it includes two configuration options so it's easy to specify what kind of rules must be ignored while automatically parsing the data.

The styles are combined with the current styleset, so people can keep using the current format for non-classes styling as well as nicer names (the parsed styles are shown as element.class)

[Alfonso Martínez de Lizarrondo]

Could it be possible to add just the new function to the stylescombo plugin to 3.5.2?

That's really all that it's needed to enable this functionality as the other file can be deployed as an external plugin and the change also allows being able to reload the stylesSet due to any other reason. Currently it's not possible to do this task in a plugin due to the use of the variable "stylesList" in a closure.

[Alfonso Martínez de Lizarrondo]

Updated patch just for the Styles combo

[Alfonso Martínez de Lizarrondo]

The 901_2 patch allows to reset the styles combo at any time, not only when the editor is first loaded.

[Alfonso Martínez de Lizarrondo]

Improved patch

[Wiktor Walc]

Looks like a really nice addition to the set of optional plugins like autogrow or tableresize.

[Wiktor Walc]

I have tried 901.patch + 901_3.patch. Looks good, but I found one problem: all CKEditor specific styles should ignored by this plugin. Right now it shows CSS styles like:

img.cke_flash
img.cke_hidden
img.cke_iframe
img.cke_anchor
a.cke_anchor
img.cke_pagebreak
table.cke_show_border

[Wiktor Walc]

Also, just like in #7240, it would be nice to have a sample page for this plugin with a dedicated stylesheet to show the capabilities of this plugin and possibly with default styles removed:

config.stylesSet = [];

[Alfonso Martínez de Lizarrondo]

In order to exclude those classes I've extended just the default stylesheetParser_skipSelectors to reject "\.cke_"

The important part is the 901_3.patch, if that one is applied into the core then this plugin might be included in 3.6 or provided only as a test plugin until everybody is happy about how it works, but at least people will be able to download and use it.

I've created a sample page and provided a stylesheet from trac as it includes lots and lots of styles and rules. With regards to that, it can be trimmed down or replaced or whatever, it's just one stylesheet that I've found easily.

[Alfonso Martínez de Lizarrondo]

Updated patch

[Alfonso Martínez de Lizarrondo]

Ops, I think that the cke_ problem is due to this line no longer working:

if ( node.getAttribute( 'cke_temp' ) ) 

I'll update it later.

[Alfonso Martínez de Lizarrondo]

Revised patch

[Alfonso Martínez de Lizarrondo]

The new patch correctly ignores the internal stylesheets.

[Sa'ar Zac Elias]

Sorry, one thing: the configurations are cross-editors, look at the attached sample.
Please also fix the coding styles.

[Alfonso Martínez de Lizarrondo]

Revised patch

[Alfonso Martínez de Lizarrondo]

Now there are no variables in the closure shared amongst instances.

[Alfonso Martínez de Lizarrondo]

Fixed with [6691]

As I said, the parsesample.css was just a quick way to provide lots of contents, but it might be trimmed down as needed for the general release (although in its current way it can be also interesting to check how some tags behave with the style system).

[Wiktor Walc]

I have updated the default set of styles with [6693]. Although loading the Trac stylesheet showed the power of this plugin, it also introduced lots of styles that made the sample less atractive.

I've noted some inconsistency between different browsers:

• IE8: SPAN.markYellow
• FF, Safari: span.markYellow

Perhaps the result could be aligned?

[Alfonso Martínez de Lizarrondo]

The elements are now always lowercase with [6695]