如何在反应中向所见即所得编辑器添加内部样式答案

【问题标题】：how to add internal style to the wysiwyg editor in react如何在反应中向所见即所得编辑器添加内部样式
【发布时间】：2022-10-13 05:28:43
【问题描述】：

我在上面的 react 应用程序中使用 tinymce 编辑器。
我正在尝试显示用于编辑 HTML 页面的编辑器，该页面具有多种样式，其中包含 flexbox 内部造型。
但此编辑器不支持内部样式并删除所有样式迫使我将其添加为内联样式
我不想在用户提交页面时使用内联样式

.顺便说一句，我正在使用 initialvalue 来提供我的 HTML 模板。但是内部样式适用于普通的 html/css/js 模式示例 here。

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>
     </>
   );
 }

【问题讨论】：

标签： html reactjs tinymce wysiwyg

【解决方案1】：

如果您想将 CSS 应用于编辑器内容，可以在配置中使用 content_css 选项（用于内部样式）或 content_style 选项（用于外部样式表）： https://www.tiny.cloud/docs/tinymce/6/add-css-options/#content_css https://www.tiny.cloud/docs/tinymce/6/add-css-options/#content_style

这些选项允许您将样式应用于编辑器内容，但该样式随后不会内嵌到编辑器内容中。如果您希望它在稍后呈现时应用到内容，您也需要在那里加载相同的 CSS/样式。

【讨论】：