apply custom styles to Editor data

[indefinitelee]

we have html strings saved in our database and are trying to render them inside CKEditor. I did a custom build using the online editor and used the instructions provided for customizing builds and integrating from the online builder.

Our code looks something like this

{...other imports}
import ./styles.css

<CkEditor 
   {other props}
   data={"<div class="class1"><button class="btn1">Hello World</button></div>"}
/>

I have a style sheet which I import into the React component that holds my editor instance, but the classes from styles.css are not applied to the data rendered in CKEditor. Is there a way to accomplish this?

[Witoso]

Thanks for reaching out. To dig into the problem you're experiencing, it would be really helpful if we could get a bit more context. Specifically, we need to know:

• Which version of CKEditor 5 you're using,
• Some key details about your setup (plugins, etc.)
• The steps we should follow to reproduce the issue, and
• Any relevant code snippets or a link to a repository that illustrates the issue.
• What do you see in the browser: are there any errors in the console, was the content in the editor preserved in way you expect.

These details will allow us to get a clearer picture of what's going wrong and how we might fix it. Without this information, it becomes quite tricky to pinpoint the issue and provide a useful solution.

[AliaksandrBortnik]

@indefinitelee you need to make sure that you provided model-view conversions to cover all your cases. or as an alternative, you can use GHS plugin to kick off development. CKE5 cuts off all garbage that are not defined in schema and not covered by conversions. This is what happens to your DB content you're trying to pass into CKE5 instance.