How to apply TinyMCE styles to published content?

Admin 1
Viewed 131

I am using TinyMCE editor in my React app. Its CSS is working in the Editor but not working on published content.

I am rendering an element like this:

 <div 
   dangerouslySetInnerHTML={{ __html: article.content }}
 ></div>

TinyMCE React Component:

 <TinyMCE
        tinymceScriptSrc={
          process.env.PUBLIC_URL + "/tinymce/js/tinymce/tinymce.min.js"
        }
        onEditorChange={log}
        init={{
          height: 500,
          plugins:
            "preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap  pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons",
          menubar: false,
          toolbar:
            "undo redo | bold italic underline strikethrough h2 h3 h4 link codesample align fontselect fontsizeselect formatselect outdent indent preview fullscreen forecolor backcolor removeformat emoticons",
        }}
      />

When using the Editor:

enter image description here

and its output like this on target page:

Css file link

How can i do this? I read its documentation but i couldn't find anything about this. Thanks.

reactjs tinymce javascript
1 Answers

It looks as though you're using the codesample plugin based on your screenshots. In that case, you need to include a syntax highlighter alongside your published content to make it appear similar to how it renders inside TinyMCE. The TinyMCE documentation has details on how to do this using Prism.js here: https://www.tiny.cloud/docs/plugins/opensource/codesample/#usingprismjsonyourwebpage

So basically, you need to ensure both the prism.css and prism.js stylesheet/script is included alongside your published content (either bundled or as external resources). As you're using React, you may also need to setup an effect hook to actually trigger syntax highlighting like so:

  useEffect(() => {
    Prism.highlightAll();
  }, []);
user_112755150
Related