要在React中引入TinyMCE富文本编辑器，可以按照以下步骤进行操作：
1. 安装TinyMCE
使用npm或yarn安装TinyMCE：
npm install @tinymce/tinymce-react
2. 导入TinyMCE
导入TinyMCE并为其设置选项：
import React from 'react';
import { Editor } from '@tinymce/tinymce-react';
const MyEditor = () => {
const handleEditorChange = (content, editor) => {
console.log('Content was updated:', content);
}
return (
<Editor
initialValue="<p>This is the initial content of the editor</p>"
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image',
'charmap print preview anchor help',
'searchreplace visualblocks code',
'insertdatetime media table paste wordcount'
],
toolbar:
'undo redo | formatselect | bold italic | \
alignleft aligncenter alignright | \
bullist numlist outdent indent | \
help'
}}
onEditorChange={handleEditorChange}
/>
);
}
export default MyEditor;3. 使用TinyMCE
使用组件<MyEditor />在React中渲染TinyMCE编辑器：
import React from 'react';
import MyEditor from './MyEditor';
function App() {
return (
<div>
<MyEditor />
</div>
);
}
export default App;以上就是在React中引入TinyMCE富文本编辑器的基础步骤。
参考文档：Tinymce 中文文档
4. 常见问题
4.1 TinyMCE6.1及以上版本去除换行增加的P标签
forced_root_block :false或者 forced_root_block :‘’ 在TinyMCE6.1中不支持使用，要换成newline_behavior