Forums

Feature Req for Redactor Styles

Permalink
Attached an image - It would be nice if we could see what styles have been applied to content - A) so that someone would know what has been applied by looking, and B) so we know what we're clearing if once decides to get rid of the styles.

Just a thought.

1 Attachment

juddc
 
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
This feature can be added to Redactor, but it is a bit involved.

Before adding something like this, I would be interested to know if you are using menuClass when you are defining your custom styles.

The menuClass will be the class/classes applied to the dropdown text label in Custom Styles. This allows menuClass to act as a preview of the style.

Example: Elemental theme default custom styles
public function getThemeEditorClasses()
{
    return array(
        array('title' => t('Title Thin'), 'menuClass' => 'title-thin', 'spanClass' => 'title-thin'),
        array('title' => t('Title Caps Bold'), 'menuClass' => 'title-caps-bold', 'spanClass' => 'title-caps-bold'),
        array('title' => t('Title Caps'), 'menuClass' => 'title-caps', 'spanClass' => 'title-caps'),
        array('title' => t('Image Caption'), 'menuClass' => 'image-caption', 'spanClass' => 'image-caption'),
        array('title' => t('Standard Button'), 'menuClass' => '', 'spanClass' => 'btn btn-default'),
        array('title' => t('Success Button'), 'menuClass' => '', 'spanClass' => 'btn btn-success'),
        array('title' => t('Primary Button'), 'menuClass' => '', 'spanClass' => 'btn btn-primary')
    );
}

The custom styles Title Thin, Title Caps Bold, Title Caps, and Image Caption all use menuClass with a class that makes the title text a preview of that style.

More information can be found in this How-To:
https://www.concrete5.org/documentation/how-tos/designers/adding-red...

I have attached a screenshot showing how this changes the appearance of the title text.
anete replied on at Permalink Reply 1 Attachment
anete
Yes, I agree with Judd. I'm doing my first 5.7 site and find Redactor better than what I thought it would be, but still needs some work.
At the moment you have to check the html to check what style has been chosen. This isn't going to be user friendly for clients.
I have setup my styles in page_theme and am viewing the class name in the 'block custom styles' but it's not actually showing the 'preview' of what the font styles look like, which I think it's meant to. Any thought on why this would be? Please see attached screenshot.
I'm using a custom theme, so maybe I'm missing something.
juddc replied on at Permalink Reply
juddc
I haven't found the style preview in the menu to work for me.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@anete
@juddc

I believe the custom style previews do not work for you because your styles are scoped or specific enough that they won't display in Redactor.

Example: the custom styles in the Elemental theme
.title-thin {
  color: #75ca2a !important;
  font-family: 'Titillium Web' !important;
  font-size: 2.46em !important;
  line-height: 1.14285714;
  font-weight: 200 !important;
  display: block;
}
.title-caps-bold {
  color: #75ca2a !important;
  font-family: 'Titillium Web' !important;
  font-size: 1.73em !important;
  line-height: 2.47142857em !important;
  font-weight: 700 !important;
  text-transform: uppercase;
Viewing 15 lines of 29 lines. View entire code block.

These styles are written to be global and work everywhere.

Here are some options for using the custom style preview:
1. Write custom styles so they are global.
- if you use this approach, make sure your class names are not used by the concrete5 interface
2. Add a second selector for your custom styles using #redactor-dropdown-holder. This would create a selector specifically for preview use in Redactor.
Example:
#redactor-dropdown-holder .your-style-name,
.ccm-page .your-style-name {
    /*...*/
}
anete replied on at Permalink Reply
anete
Thanks Karl, I'll experiment tomorrow and see how things go.
juddc replied on at Permalink Reply
juddc
It misses the point though - because redactor doesn't tell me which styles are active.

I had a closer look and found that because my styles are wrapped with div.ccm-page, they're not getting picked up by redactor.

So I pulled those styles out and set them on their own, and then found I had to include all sorts of styles that were inherited from the parent container just to satisfy the plugin. Overall, I'd say it was a clunky process.
daenu replied on at Permalink Reply
daenu
Hi MrKDilkington
Thx for your explaination. How to do if the redactor is in a packaged single page?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Daenu

I am not sure what you are asking.

Do you want to add custom styles from CSS in a package?
daenu replied on at Permalink Reply
daenu
Yes, I want to add font families in a single page (package) to the redactor.
My attempt for now is to write a prototype in JS to add a dropdown, but the problem is that the c5 redactor.js gets loaded after my prototype file.

But I'd prefer to add that on server side. I tried to add your code (similar) to the single page on_start method, but no luck.
MrKDilkington replied on at Permalink Reply
MrKDilkington
I've only seen custom styles added through getThemeEditorClasses() in a theme page_theme.php.

I am not sure how to add them through a package.