FCKEditor stylesheet to xml styles converter

At the time we decided to use WYSIWYG editors there where mainly two choices:

  • FCKEditor
  • and TinyMCE.

TinyMCE had, and still has, better support in Drupal but FCKEditor had a built in image upload. Both editors have a number of alternative image browsers these days, some even for free. So at the moment the difference between these editors is quite small.

 

Because we are using FCKEditor for most websites we have been writing some additional features for FCKEditor. One of these features is the topic of this blog post: a stylesheet to fckstyles.xml converter.

 

FCKEditor has a quite advanced styles feature where you can use a drop down list to set a particular style to the selected text. For example you can add a class to that selected text. You can add styles to this drop down list by modifying a xml file (more information can be found here: http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Styles). The problem with this concept is that you have to make a stylesheet on the page that shows the output AND a xml file to make the style appear in the FCKEditor.

 

We created a small modification in the FCKEditor Drupal 6 module of the FCKEditor (http://drupal.org/project/fckeditor) where you can use a normal stylesheet for the styles in FCKEditor. The modification simply translates the stylesheet into the xml file format that is needed.

 

The download below is based on the last dev release of FCKEditor (the version of 2009-Jan-29). But you can also download the patch and see if you can add the functionality to another version of the FCKEditor. The download doesn’t contain the FCKEditor itself, there is some difference in licenses and I’m not really experienced enough in that area to find out if it’s allowed to combine them as a download. For more instruction about installing the FCKEditor, the project page on Drupal.org should be sufficient for that.

 

When you have installed the FCKEditor you can configure the styles functionality on the following page:

Configuration

 

You have to set a stylesheet first at the Editor CSS area and then at the predefined styles block you can set the “use fckstyles generated based on the css file set above at the Editor css”. This is all the extra configuration that is needed and this will result in the following:

 

Usage

Please put your remarks about this patch/feature in the Drupal.org issue that I made for this patch: http://drupal.org/node/373393

2attachments
fckeditor.zip (0.16 MB) fckeditor.patch_.zip (2.55 KB)

2 bezoekers hadden een reactie

  • 1. Door Fahim Moussi (not verified) 18 Feb, 2009 | Nifty!
     

    This is a very interesting project, especially for sites that are constantly worried about going out of style! (get it? bah....)

    I look forward to hearing more about it in the Drupal community, keep up the good work!!

  • 2. Door Thuiszonneenergie (not verified) 27 Feb, 2009 | Good idea
     

    I've been experimenting with Drupal a lot lately and this is something I've been looking for.

    I want to maintain strict control over the styles that users use when they create pages or stories. Nice solution that you can use the theme cms for this.

    Thanks for the post,
    Bas B.

  • Post new comment

    The content of this field is kept private and will not be shown publicly.
    • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h1> <h2> <h3> <br> <br/> <p> <img>
    • Lines and paragraphs break automatically.
    • Web page addresses and e-mail addresses turn into links automatically.