如何在React的TinyMCE富文本编辑器中添加内部样式

我在React应用中使用TinyMCE编辑器，想要实现一个可编辑带有大量flexbox内部样式的HTML页面的编辑器。但该编辑器会移除所有内部样式，迫使我只能使用内联样式，而我不希望用户提交页面时采用内联样式。另外，我通过initialValue提供HTML模板，且内部样式在普通HTML/CSS/JS模式下可正常生效。

export default function App() {
   const editorRef = useRef(null);
   const log = () => {
     if (editorRef.current) {
       console.log(editorRef.current.getContent());
     }
   };
   return (
     <>
       <Editor
         onInit={(evt, editor) => editorRef.current = editor}
         initialValue={htmlTemplate}
         init={{
           height: 500,
           menubar: false,
           extended_valid_elements:
                'style[*],div[class|contenteditable|ref|data|style]',
           plugins: [
             'advlist autolink lists link image charmap print preview anchor',
             'searchreplace visualblocks code fullscreen',
             'insertdatetime media table paste code help wordcount'
           ],
           toolbar: 'undo redo | formatselect | ' +
           'bold italic backcolor | alignleft aligncenter ' +
           'alignright alignjustify | bullist numlist outdent indent | ' +
           'removeformat | help',
           content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
         }}
       />
       <button onClick={log}>Log editor content</button>
     </>
   );
 }

内容的提问来源于stack exchange，提问作者xxxhomie21