0
337
ViewsHow to apply TinyMCE styles to published content?
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:
and its output like this on target page:
How can i do this? I read its documentation but i couldn't find anything about this. Thanks.
1 answers
Answer question0
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();
}, []);