Question T6897
Visible to All Users

ckeditor 5 css issue

created 4 years ago

Hello

I upgraded my ck editor custom widget from ck editor 4 to ck editor 5

the css from surveyJS is overriding the ck editor5 tool bar css

so this is what a ck editor 5 should look like
Clipboard-File-1.png

this is what I got after I integrate it in surveyJS
Clipboard-File-2.png

I'd like to know if there is a way to prevent surveyJS css affecting the css in ckeditor 5 custom widget.

Thanks

Comments (2)

    Hello,

    Can you share a plunker sample?

    Thanks, Serge
    SurveyJS Team

      Hello

      You can find the sample in the attachment.

      reproduction steps:

      1. download the zip file and unzip it
      2. cd into the folder
      3. npm i
      4. ng serve
      5. go to http://localhost:4200/survey

      you should see the messed up ck editor toolbar like this

      Clipboard-File-1.png

      and if you comment out line 37 Clipboard-File-2.png in src/app/components.ts, everything will be back to normal.

      and yes I know this can fix the issue. but the problem is that due to company restriction, I am not allowed to alter our current build process. So I'd like to know if there is a way to have the ckeditor 5 toolbar showing up properly when I am adding the surveyJS css in the way that the sample shows.

      and… if it's ckeditor 4, this messed up toolbar css will not happen.

      Thanks

      Answers approved by surveyjs Support

      created 4 years ago

      Hello,

      You need to use the following CSS:

      CSS
      #surveyElement .sv_main .ck button { color: var(--ck-color-text); background-color: transparent; color: var(--ck-color-text); background-color: transparent; color: var(--ck-color-text); background-color: transparent; border-radius: unset; min-width: unset; font-size: 1em; font-weight: normal; padding: var(--ck-spacing-tiny); }

      Thanks, Serge
      SurveyJS Team

        Comments (2)

          worked as charm

          Thanks!

            Great!