What I want, is that the CKEditor will use the website css, as you can see here: enter image description here

it is not the same as: enter image description here

I am using less css. I have tried to define the main less css file which imports all the other less css files together. This didn't work. Also the automatically generated css file by drupal doesn't has a solid path to put into the CKEditor CSS settings underneath the CSS file path settings.

Is there a way to make my editor use the same style as I use for the website?

  • Hi. Interesting question. But I'm a bit confused - can you do that without less css and css aggregation? Or is it impossible for you even without them?
    – Mołot
    Nov 24 '13 at 18:15
  • @Mołot You can provide a static path to a CSS file to use in the editor (in the settings for each format)
    – Clive
    Nov 24 '13 at 20:58
  • @Clive I have no CSS files, I am using less CSS, I tried importing my global.less which imports all the other .less files but this didn't worked. Drupal itself creates a CSS file in the background which I/We can't touch.
    – Rafael
    Nov 24 '13 at 22:52
  • @duck Yeah I get what you're asking, I was just responding to Mołot's question about whether you can do it with a static CSS file. I'd like to know how to do this too
    – Clive
    Nov 24 '13 at 22:53

LESS like SASS has to be compiled to real CSS-files.

Find out where the compiler put the CSS-files eg. by disabling css-aggregation and check the source-output of your site.
Add the paths of the css-files to your CKEditor-settings.

  • Already tried that, but it didn't worked at all! Found the temporary CSS file, copied all the CSS, made use of an online Less CSS compiler, copy/paste it into a new file I made "CKEditor.css" used the path of this file for the CKEditor CSS settings.
    – Rafael
    Nov 27 '13 at 10:00
  • You won't believe me, but in the incognito mode of chrome it worked like a charm!
    – Rafael
    Nov 27 '13 at 10:20

1. Go to a random page of your drupal website

2. Look into the page source, there should be an CSS file generated by Drupal itself (weird long name.css) Click on it.

3. Create a CSS file named CKEditor.css and put it in your theme root folder.

4. Copy all the CSS from the temporary CSS file and paste it into your newly created CSS file named CKEditor.css

5. In the CKEditor configuration underneath the CKeditor CSS settings, paste the CSS file path of CKEditor.css

6. Clear your browser cache and you're ready to go.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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