Ticket #901 (closed New Feature: fixed)

Opened 7 years ago

Last modified 3 years ago

Parse stylesheet to make styles list

Reported by: poeg@… Owned by: alfonsoml
Priority: Normal Milestone: CKEditor 3.6
Component: Core : Styles Version: 3.0
Keywords: SF Cc: kazador@…, astpaul@…, gazou78@…

Description

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

Attachments

parseCSS.zip (2.6 KB) - added by alfonsoml 7 years ago.
901.patch (5.5 KB) - added by alfonsoml 4 years ago.
Proposed patch
901_2.patch (1.1 KB) - added by alfonsoml 3 years ago.
Updated patch just for the Styles combo
901_3.patch (1.1 KB) - added by alfonsoml 3 years ago.
Improved patch
901_4.patch (28.4 KB) - added by alfonsoml 3 years ago.
Updated patch
901_5.patch (28.4 KB) - added by alfonsoml 3 years ago.
Revised patch
stylesheetparser.html (4.3 KB) - added by Saare 3 years ago.
901_6.patch (28.5 KB) - added by alfonsoml 3 years ago.
Revised patch

Change History

comment:1 Changed 7 years ago by martinkou

  • Cc alfonsoml added
  • Reporter changed from martinkou to poeg@…

comment:2 Changed 7 years ago by alfonsoml

  • Cc alfonsoml removed
  • Component changed from General to Core : Styles

comment:3 Changed 7 years ago by alfonsoml

  • Milestone set to FCKeditor 2.5

comment:4 Changed 7 years ago by fredck

  • Milestone changed from FCKeditor 2.5 to FCKeditor 3.0

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

comment:5 Changed 7 years ago by fredck

comment:6 Changed 7 years ago by alfonsoml

  • Cc kazador@… added

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

Changed 7 years ago by alfonsoml

comment:7 Changed 7 years ago by alfonsoml

  • Cc astpaul@… added

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

comment:8 Changed 7 years ago by alfonsoml

  • Cc gazou78@… added

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

comment:9 Changed 6 years ago by w.olchawa

  • Keywords Confirmed HasPatch added

comment:10 Changed 5 years ago by fredck

  • Milestone changed from CKEditor 3.0 to CKEditor 3.x

comment:11 Changed 4 years ago by fredck

  • Milestone CKEditor 3.x deleted

Milestone CKEditor 3.x deleted

Changed 4 years ago by alfonsoml

Proposed patch

comment:12 Changed 4 years ago by alfonsoml

  • Status changed from confirmed to review
  • Owner set to alfonsoml

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)

comment:13 Changed 4 years ago by wwalc

  • Version set to 3.0

comment:14 Changed 3 years ago by alfonsoml

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.

Changed 3 years ago by alfonsoml

Updated patch just for the Styles combo

comment:15 Changed 3 years ago by alfonsoml

  • Keywords HasPatch removed

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

Changed 3 years ago by alfonsoml

Improved patch

comment:16 Changed 3 years ago by wwalc

  • Milestone set to CKEditor 3.6

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

comment:17 Changed 3 years ago by wwalc

  • Status changed from review to review_failed

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

comment:18 Changed 3 years ago by wwalc

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 = [];

comment:19 Changed 3 years ago by alfonsoml

  • Status changed from review_failed to review

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.

Changed 3 years ago by alfonsoml

Updated patch

comment:20 Changed 3 years ago by alfonsoml

  • Status changed from review to assigned

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.

Changed 3 years ago by alfonsoml

Revised patch

comment:21 Changed 3 years ago by alfonsoml

  • Status changed from assigned to review

The new patch correctly ignores the internal stylesheets.

comment:22 Changed 3 years ago by Saare

  • Status changed from review to review_passed

comment:23 Changed 3 years ago by Saare

  • Status changed from review_passed to review_failed

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

Changed 3 years ago by Saare

Changed 3 years ago by alfonsoml

Revised patch

comment:24 Changed 3 years ago by alfonsoml

  • Status changed from review_failed to review

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

comment:25 Changed 3 years ago by Saare

  • Status changed from review to review_passed

comment:26 Changed 3 years ago by alfonsoml

  • Status changed from review_passed to closed
  • Resolution set to fixed

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).

comment:27 Changed 3 years ago by wwalc

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?

comment:28 Changed 3 years ago by alfonsoml

The elements are now always lowercase with [6695]

Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy