5

I have made changes to the configuration of CKEditor for the basic_html rule set as follows:

CK Editor configuration

When I then try to use the editor, however, I get the following:

Editor as visible on actual page

I have tried clearing the cache multiple times. I have tried rebuilding the cache with drush cache-rebuild.

Is there something else you are suppose to do to be able to configure CKEditor in Drupal 8?

Improve this question

5 Answers 5

Reset to default
9

1. Your Custom style should be present in your CSS file. 2. Your FILTER SETTING should be proper. To check, same way as yours, I just enabled style and and put h1.heading-a|Title(which I took from css/base/elements.css for example purpose) in style dropdown and and it did show up as shown in the second image.

enter image description here

Second Image

enter image description here

Hence, the issue is, to properly put the Class|Key in the Styles dropdown section and make sure that it is available in CSS.

Later to check the custom one, I did put h2.myclass {color: red} in elements.css and saved and cleared cache. And as you can see it showed up in following image

enter image description here

enter image description here

UPDATE-1: FILTER SETTING

Now the reason why, horizontal line and underline icon are not visible as you have stated in your comment. For that you need to check the FILTER SETTINGS. Have you played with Limit allow HTML tags and correct faulty HTML list which you can see at the bottom of the basic HTML setting page as shown in following image. If you delete <hr> from the list the icon will not shown up. Just I checked, if I remove <hr> form list the icon also gets disappeared.

enter image description here

And your Enable filter setting should be as shown in following image.

enter image description here

Improve this answer
10
  • Replicating your process there is no change in my result. I still get no custom styles. Additionally, and I should have made this clearer in my original post, if you look at my Basic HTML settings above, I have added a number of built in items such as 'horizontal line' and 'underline' which also do not appear when I try to use the editor.
    – tanbog
    Commented Jul 27, 2016 at 8:11
  • Are you using Bartik theme?
    – CodeNext
    Commented Jul 27, 2016 at 8:13
  • Ok Got the Problem. Have you played with Limit allow HTML tags and correct faulty HTML list which you can see at the bottom of the basic HTML setting page, See image I have updated in my answer. If you delete <hr> from the list the icon will not shown up. Just I checked. If i remove <hr> icon also gets disappeared
    – CodeNext
    Commented Jul 27, 2016 at 8:32
  • Check Enable Filters setting also as shown in second updated image. It should be as shown.
    – CodeNext
    Commented Jul 27, 2016 at 8:42
  • 3
    This has to be one of the most annoyingly badly documented issues I've dealt with Drupal; or at least in recent memory. I don't think I'm experiencing the EXACT scenario that the user in the chat described, but it might just have been an update to Ckeditor since July; the main point is the same though. Adding classes to Limit Allowed Tags: <p class=""> = ALL classes, <p class="newclass"> = Only new class, <p class="newclass othernewclass"> = Only newclass and othernewclass. Hope this helps someone.
    – UnsettlingTrend
    Commented Oct 15, 2016 at 16:07
2

For people on drupal 8.4: there is a bug in CKEditor itself on this manner. See https://www.drupal.org/project/drupal/issues/2911749 for more information and patches.

One possible workaround is to replace the ckeditor.js with that one from > Drupal 8.3.7 (should be version 4.6.2), then everything should work well > again.

In composer.json, add this to your "extra" section. See comment #33 in the link (credit to @ayalon on drupal.org):

"patches": {
  "drupal/core": {
    "Downgrade CkEditor until https://www.drupal.org/node/2911749 is fixed": "https://www.drupal.org/files/issues/fix_ckeditor_styles_dropdown-2911749-17.patch"
  }
}
Improve this answer
1

I had a similar problem when using the Basic HTML text format and wanted to add a style like p.class|Title. The difference was that I even couldn't open the style list, because the style button was disabled.

To fix this I edited the text format and added <p class=""> to the "Limit allowed HTML tags" field.

Improve this answer
1
  • In my case, it was adding <div class id> to the allowed HTML tags field. This is a stupid bug!
    – Matt Fletcher
    Commented Apr 26, 2017 at 11:27
1

Check if you missed to class attribute for allowed HTML tags. Change

<a href hreflang> <em>

to

<a class href hreflang> <em>
Improve this answer
0

In my case it did not work, because the line with a specific CSS class under "Styles dropdown" was too long.

This works:

code.c-bolt-code-snippet__code.c-bolt-code-snippet__code--block|Codeblock

but this does not work:

code.c-bolt-code-snippet__code.c-bolt-code-snippet__code--block.c-bolt-code-snippet-syntax--light|Codeblock
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.