Custom Styles not Displayed in Editor

[Alan-A]

I'm wanting to give users the possibility of adding custom styles that are defined in the standard theme 'style.css' file.
(The 'standard' method of implementing custom styles via the GS's CKEditor's "Styles" drop-down selector:

Code:

{ name : 'Marker: Yellow'    , element : 'span', styles : { 'background-color' : 'Yellow' } },

results in in-line styles. However, IMO this method misses out on one of the key features of CSS - the ability to administer styles centrally.)

I've followed Connie's excellent "WYSIWYG-Editor" tutorial in the GS Wiki (http://get-simple.info/wiki/how_to:wysiwyg_editor) and made my own custom style sheet.
I've also found out that you can define your own CSS classes for the 'Styles' window using:

Code:

{ name : 'Footnote', element : 'p', attributes : { 'class' : 'footnote' } },

This works, in so far as the editor applies my 'footnote' class to the 'p' tag correctly and when I look at my newly coded page from outside I can see that the browser is correctly applying the formatting that I've specified in the 'style.css' file.

However, what doesn't work is that this isn't WYSIWYG. Whilst clicking on the 'Marker: Yellow' default custom style shows a yellow background behind the text once the focus is changed from the editor toolbar back to the editor window, users can only see that they've applied my 'Footnote' class when they switch over to the editor's 'Source' view.
Which means that chaos and therefore an unhappy customer is almost certain to occur sometime along the line.

Does anyone know how to get the CKEditor to read the GS 'style.css' file 'realtime'?

[Alan-A]

So, it looks like I've found I a partial answer, if not a particularly useful one.

In the CKEditor documentation site http://docs.cksource.com/CKEditor_3.x/De...ide/Styles they describe their 'Stylesheet Parser Plugin', which after a third reading sounds as if it might do what I'm looking for. Unfortunately they only introduced it with version 3.6 and the current GetSimple version uses CKEditor 3.5.2.

So, three questions;
- Does anyone know of a workaround for the current CKEditor version?
- Is it possible for mere mortals (that once upon a time did a php course) to update the editor themselves?
- Is an official editor update planned?

[Connie]

Alan,

try this:

How Do I Add Existing CSS Styles from an External File to Editor Output and the Styles Drop-Down List? [url]
http://docs.cksource.com/CKEditor_3.x/Howto/External_CSS_Styles[/url]

If it works, tell us and I will add it to the tutorial, I had no time to test it until now

Cheers, Connie

[mvlcek]

I'm using the following setup, which shows the styles in the styles dropdown as well as showing the site's styles in the WYSIWYG area.

gsconfig.php:

Code:

define('GSEDITOROPTIONS',
  " toolbar: [
            ['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', 'Outdent', 'Indent'],
      ['Table', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source'],
      '/',
      ['Styles','Format'],
    ],
    stylesCombo_stylesSet: 'my_styles:/theme/Choice/styles.js',
    contentsCss: '/theme/Choice/default.css',
    bodyId: 'content'
");

(as Connie has already pointed out to me, I could have defined the toolbar within GSEDITORTOOL)

theme/Choice/styles.js:

Code:

CKEDITOR.addStylesSet( 'my_styles',
[
    // Block Styles
    { name : 'Normal', element : 'p', attributes : { } },
    { name : 'Motto1', element : 'p', attributes : { 'class' : 'motto1' } },
    { name : 'Motto2', element : 'p', attributes : { 'class' : 'motto2' } },
    { name : 'Motto3', element : 'p', attributes : { 'class' : 'motto3' } },
    { name : 'Rechts', element : 'p', attributes : { 'class' : 'rfloat' } },
    { name : 'Links', element : 'p', attributes : { 'class' : 'lfloat' } },

    // Inline Styles
    { name : 'Code', element : 'span', attributes : { 'class' : 'code' } },
]);

theme/Choice/template.php (important: use same ID for content div as for bodyId in CKEDITOR settings):

Code:

...
  <div id="content" class="<?php echo return_page_slug(); ?>">
    <h1 id="pagetitle"><?php echo stripslashes($title); ?></h1>
    <?php get_page_content(); ?>
  </div>
...

theme/Choice/default.css (important: use body#content for editor specific styles, like reset padding, margin, etc.; specify the styles for the style dropdown without #content)

Code:

body#content { /* for the editor */
  width: 94%;
  ...
}
#content p { /* for site and editor */
  ...
}
...
.motto1 { /* without #content */
  ...
}

Finally press F5 multiple times in your browser, clear the cache, etc. until the editor looks the same as the site ;-)

[Alan-A]

Many thanks both Connie and Mvieck,

I've got to concentrate on other projects now (deadlines, deadlines) but I'll get back to you on this when I've got more time.

Until later,

A.

[Alan-A]

Connie,
many thanks but your link

http://docs.cksource.com/CKEditor_3.x/Ho...CSS_Styles

is about their "Stylesheet Parser", which is included in CKEditor 3.6 and later. GetSimple currently uses CKEditor 3.5.2 so it's not a solution for us at the moment.
I'll take a look at mvlcek's posting now.
A.

[Connie]

you can always update the editor in GS, that will be no problem

[Alan-A]

you can always update the editor in GS, that will be no problem

Thanks for that "rescue ring" but I'd like to get avoid a custom setup as far as possible because of the almost certain memory leaks that will happen ;-)

[Alan-A]

Hallo mvlcek,

once more many thanks for your posting.

I'm in the process of working through it and there are three things I don't understand:

• Are you combining the default styles from the CKEditor 'contents.css' file with your own theme styles in your default.css file?
  
• What is the significance of the declaration of the "content" ID in the 'template.php' file?
  As far as I can see, CKEditor uses its 'bodyId' parameter to set the ID of the HTML file in the editor's iframe. I would have thought that I could use this ID to make sure that the default CKEditor styles don't get applied to elements that are outside the editing window. However for this to happen the default CKEditor styles really need to have a prefix (or in the case of the body tag itself, a suffix as you show). As this works without the declaration in the template file, I'm puzzled as to what it is for.
  
• Do you manage to get the name of your class (in your example, that would be "Code") formatted, when it's shown in the editors "Styles box?" I'm only getting my browser's default formatting.
  

Many thanks in advance,

Alan

[mvlcek]

I'm in the process of working through it and there are three things I don't understand:

• Are you combining the default styles from the CKEditor 'contents.css' file with your own theme styles in your default.css file?
  

I'm using my own theme file default.css and I have no idea if it is combined with CKEditor's style sheet or replaces it ;-)

• What is the significance of the declaration of the "content" ID in the 'template.php' file?
  As far as I can see, CKEditor uses its 'bodyId' parameter to set the ID of the HTML file in the editor's iframe. I would have thought that I could use this ID to make sure that the default CKEditor styles don't get applied to elements that are outside the editing window. However for this to happen the default CKEditor styles really need to have a prefix (or in the case of the body tag itself, a suffix as you show). As this works without the declaration in the template file, I'm puzzled as to what it is for.
  

It's to get exactly the styles for the content div in my template, which looks like this:

Code:

...
<body>
...
<div id="content"> ... <?php get_page_content(); ?> </div>
...

Thus all rules #content ... in my style sheet will automatically apply to the editor, too.
And you might need to add additional rules for the editor (because you don't have a body > ... > div#content hierarchy) by specifying rules for body#content ... - they will only apply to the editor, e.g. I have a rule

Code:

body#content {
  width: 94%;
  background-color: white;
}

• Do you manage to get the name of your class (in your example, that would be "Code") formatted, when it's shown in the editors "Styles box?" I'm only getting my browser's default formatting.
  

Yes, you just have to make sure to have a simple rule (like .code or span.code) in your style sheet and not just a too specific one (like #content span.code which will not match).

[Alan-A]

Hallo mvlcek,

and many thanks.
I think I understand you better now - it's a bit more complex than 'normal CSS'.

One last question:

Yes, you just have to make sure to have a simple rule (like .code or span.code) in your style sheet and not just a too specific one (like #content span.code which will not match).

It works for me with such simple styles but I don't want to use them as they're coded directly into the HTML tag with something like " style='color:red;' ".
What I was wondering was if you have it working for your own classes, like the "Code" example you gave in your post #4, where the editor would enter something like " class='code' " into the HTML tag?

Best wishes,

A.

[mvlcek]

It works for me with such simple styles but I don't want to use them as they're coded directly into the HTML tag with something like " style='color:red;' ".
What I was wondering was if you have it working for your own classes, like the "Code" example you gave in your post #4, where the editor would enter something like " class='code' " into the HTML tag?

I don't understand your question.
I always use classes as you can see in the example, e.g. motto1 on a paragraph level or code on span level.
They are e.g. defined as follows in the style sheet:

Code:

.motto1 {
  color: #9BBB59;
  font-size: 140%;
  font-style: italic;
  font-weight: bold;
  line-height: 1.4em;
  text-align: center;
}
span.code {
  font-family: 'Courier New',monospace;
  font-size: 90%;
}

If the customer wants to have different colors or a complete new theme, I just change the style sheet, as nowhere in the pages there are concrete styles. For that reason I normally won't give the user the possibility to choose colors or fonts but let him describe what he wants to achieve functionally (like highlight a text or paragraph, have a technical description, etc.) and provide css classes for that. Then the user can select the desired class from the styles dropdown and doesn't have to remember that highlighting is done with red - or was it light red?

[Connie]

I think I explained how to define in your custom file


http://docs.cksource.com/CKEditor_3.x/De...ide/Styles

http://docs.cksource.com/CKEditor_3.x/Ho...tom_Styles

It is described and it is not so difficult to do.

[Alan-A]

Hallo mvlcek,

Then the user can select the desired class from the styles dropdown and doesn't have to remember that highlighting is done with red - or was it light red?

This is exactly what I'm seeking.

It works for me with such simple styles but I don't want to use them as they're coded directly into the HTML tag with something like " style='color:red;' ".
What I was wondering was if you have it working for your own classes, like the "Code" example you gave in your post #4, where the editor would enter something like " class='code' " into the HTML tag?

I don't understand your question.

I'm afraid I wasn't very exact....

I'm getting the formatting from my style sheet correctly displayed in the editing window when it is applied using the styles dropdown (In my case I've a class called "footnote" which causes text to be shown in italics).

What I was wondering is whether, taking your example from your post #12 above, when you open your styles dropdown, is the class name "Code" in the dropdown displayed in the 'Courier New',monospace; you define or is it displayed in some default style?

My "Footnote" name is, as you've probably guessed, not shown in italics in the dropdown, although once I've applied it, my text in the editing window is shown in italics.

Many thanks in advance,

A.

[mvlcek]

What I was wondering is whether, taking your example from your post #12 above, when you open your styles dropdown, is the class name "Code" in the dropdown displayed in the 'Courier New',monospace; you define or is it displayed in some default style?

Yes, it is shown correctly. It is important to specify the CSS rules without further conditions, that is e.g. .code { ... } and not #content .code { ... }.

[Alan-A]

Hallo mvlcek,

Yes, it is shown correctly. It is important to specify the CSS rules without further conditions, that is e.g. .code { ... } and not #content .code { ... }.

Thanks for the info and the tip.
I'll have a good look again at what I've done to see if I can find where the worm is.
But I now know that it is possible.

Many thanks,

A.