Styles dropdown in the ckeditor

Submitted by TomEff on Tue, 09/20/2016 - 11:42
Forums: 
Content creation

Hi,

I was wondering if you could point me in the right direction to enable the stylescombo dropdown for the ckeditor in h5p? 

We would like to be able to add pre-defined style options for headers etc so colours can be kept consistent. Or if it's easier, is it possible to limit the number of colours available from the colour picker?

We're creating a series of courses and would like to make it easier for users to create content and keep the theme consistent throughout.

Many thanks

icc's picture

icc

Wed, 09/21/2016 - 09:35

Hi! Which platform are you on?
Both WordPress and Moodle have 'hooks' or 'actions' which a custom plugin or theme can use to add things like custom JavaScript, Stylesheets(CSS) and CKEditor config.

It sounds a bit like you'd want a custom CSS style for all the headers tags inside H5P content? I think you should be able to limit the colour pickers as well through CKEditor config.

Under the documentation section for developers, you can find some examples on how to add additional or custom buttons to the CKEditor: WYSIWYG Text Editor Buttons
Changing the CKEditor config options should be even easier.

TomEff

Wed, 09/21/2016 - 11:30

Hi,

I'm using Drupal 7 for the main site and the H5P is inside an Opigno microsite section. I've had an attempt at using the hooks described but I've only been able to add more tag options to the 'format' dropdown (image below). I haven't been able to add multiple <h2>s that have a different class for specific colours etc. 

save image

Ideally, I would like to get the 'styles' dropdown like in the image below.

save image

Would you be able to point me where the CKEditor config options are for Drupal? I've had a look through the files but couldn't find the bit relating to what colour choices are being made. The GUI for the CKEditor in the admin menu of Drupal is for the CKEditor for the main site and I can't find the options for the one being used by the H5P editor.

Thank you very much for your help, I realise this is a bit of a strange situation!

TomEff

Wed, 09/21/2016 - 11:32

sorry realise did the images wrong. Attached them as files to show different dropdowns =)

Attachments: 
Image icon format dropdown.png
Image icon styles dropdown.png

TomEff

Wed, 09/21/2016 - 13:34

For anyone else wondering, I've found the place to limit the colours available:

In the h5peditor-html.js file I changed following on line 235ish:

<code>if (this.field.font.color) {

      // Text color chooser

      colors.items.push('TextColor'); 

      if (this.field.font.color instanceof Array) {

        ret.colorButton_colors = getColors(this.field.font.color);

        ret.colorButton_enableMore = false;

      }

    }</code>

to:

<code>if (this.field.font.color) {

      // Text color chooser

      colors.items.push('TextColor'); 

      //if (this.field.font.color instanceof Array) {

        //ret.colorButton_colors = getColors(this.field.font.color);

        ret.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00';

        ret.colorButton_enableMore = false;

      //}

    }</code>

I had to comment out the inside if() statement as this wasn't returning true.

icc's picture

icc

Thu, 09/22/2016 - 10:09

Sadly, there's no UI for configuring the CKEditor that is being used inside H5P. Not yet, at least. They each have different configurations depending on the settings of the content type. Currently, the only way to override this is by code. 

I'm glad you found a fix for the colors but be aware that it will go away when the plugin is updated. I would recommend implementing the semantics_alter hook in a custom module or theme and then overriding the color settings for all fields: 

function mymods_h5p_semantics_alter(&$semantics, $library_name = NULL) {
  foreach ($semantics as $field) {
    // Go through list fields
    while ($field->type === 'list') {
      $field = $field->field;
    }
 
    // Go through group fields
    if ($field->type === 'group') {
      mymods_h5p_semantics_alter($field->fields, $library_name); // Check your function name!
      continue;
    }
 
    // Check to see if we have the correct type and widget
    if ($field->type === 'text' && isset($field->widget) && $field->widget === 'html') {
      // Found a text field. with wysiwyg.
      if (isset($field->font) && isset($field->font->color) && $field->font->color) {
        // Color selector is enabled! 
        // Override default colors
        $field->font->color = array('#ff0000', '#00ff00', '#0000ff');
        // TODO: Use different color codes above
      }
    }
  }
}


Adding the Styles Combo box is a bit more complex because you have to know how to configure it. Here's a guide to help you get started: http://docs.ckeditor.com/#!/guide/dev_styles

Ideally, you'd want to place the config inside a JavaScript that gets loaded when the H5P node form is displayed, but just to get started and to see how it works it's OK to just change the code of h5peditor-html.js or probably even easier just modify the ckeditor/config.js inside the h5peditor folder.

Thank you for sharing your experiences in customizing H5P.

TomEff

Thu, 09/22/2016 - 12:31

That's a much better way. Would much rather do it by hook than messing with core files =)

Thank you very much for all your help