score:-1

Here is an answer to above question:

<div style={{wordWrap:'break-word',display:'inline-block'}}>
<div className="editor" dangerouslySetInnerHTML={{_html:this.state.content}}/>
</div>

score:1

you can just install npm package like npm i react-render-html enter link description here and use it like :

 <div className='...'>
    {renderHTML(someHTML)}
  </div>

score:3

React does not allow you to render html code directly. Instead you have to use dangerouslySetInnerHTML attribute to do so. Do the following to solve your problem,

<div dangerouslySetInnerHTML={this.createMarkup()} className='editor'></div>

and have a method on the class as

    createMarkup = () => {
      return { __html: this.state.content };
    }

This will make sure that you are not rendering the raw HTML to the page.

You can read more about this here

score:5

There are 2 options:

  • Download or using script to get Full CSS and include it in your project. Link here

Note: You have to add a parent container with a class name ck-content

  • Create a custom CKEditor 5 build from the source code with all the CSS (both UI and the content) extracted to a separate file Advance Guide

You can see more here from the documentation: Content Styles


Related Query

More Query from same tag