formio.js icon indicating copy to clipboard operation
formio.js copied to clipboard
verified publisher icon formio

[BUG] Missing ckeditor css when form loads

Open dfnjy opened this issue 5 years ago • 7 comments

Environment

Please provide as many details as you can:

  • Hosting type
    • [ ] Form.io
    • [x] Local deployment
      • Version: most recent release
  • Formio.js version: most recent release
  • Frontend framework: React
  • Browser: Chrome
  • Browser version: upToDate

Steps to Reproduce

  1. Drag and drop a content component, enter some text and change text size to huge
  2. Save the form and reload. See the text gets back to original size.
  3. Click edit on this component and exit without saving. See the text gets big again.

Expected behavior

Observed behavior

Seems like this is because ckeditor and its css will be loaded into

only when the content component being first opened. When you mark a text as huge, a class name will be applied and saved with the form, but the corresponding css won't be available when the page loads. The editor can be loaded later but css should be loaded when form builder loads.

dfnjy avatar Feb 12 '20 20:02 dfnjy

@dfnjy I've tried to using version 4.9.0-beta.4 and was unable to reproduce the issue. Can you verify what version of formio.js you are using?

jeriah-formio avatar Feb 13 '20 14:02 jeriah-formio

@jhen1422 Thank you for your reply! Hmm I was using 4.8.1, but I just tried 4.9.0-beta.4 and the issue is still there. My setup is a new react-app-starterkit, and pull in react-formio 4.2.4 I made a little gif, hope that helps: Peek 2020-02-13 11-34

dfnjy avatar Feb 13 '20 19:02 dfnjy

Hey! Any updates here?

dfnjy avatar Feb 17 '20 18:02 dfnjy

The issue here appears to be that the CSS for the wysiwyg editor only gets loaded when editing the form. You should be able to fix this by manually including the CSS from ckeditor in the app manually. We don't typically load them since many users don't want them in the form unless they have a wysiwyg editor.

randallknutson avatar Feb 17 '20 20:02 randallknutson

I am using angular library of formIO. I have added the CSS to my component CSS file but nothing works. I inspected the elements to find out that the ck editor classes are not being added in the tags so there is no point in adding the CSS I guess. Any Help?

muneebahmad0600 avatar Apr 04 '23 10:04 muneebahmad0600

I am using angular library of formIO. I have added the CSS to my component CSS file but nothing works. I inspected the elements to find out that the ck editor classes are not being added in the tags so there is no point in adding the CSS I guess. Any Help?

Were you able to fix this ? I am currently experiencing this with Vue and formio and adding the CSS has not fixed it.

dagorod avatar Aug 30 '23 16:08 dagorod

Works as expected on the portal. Please, check in the react app

https://github.com/formio/formio.js/assets/128126697/b80abcaf-ae4d-42cd-a2f9-ebc0a51b698f

olgabann avatar Apr 03 '24 10:04 olgabann