TinyMCE + React 설정 방법

최근에 프로젝트에서 React로 TinyMCE를 설정해야 했습니다. 이 게시물이 도움이 되었으면 합니다. 이 작업을 수행하는 데 몇 가지 문제가 있었고 내가 수행한 방법을 공유하고 싶습니다.

먼저, tinymce용 패키지와 reac용 래퍼를 다운로드해야 합니다.
npm install tinymcenpm install --save @tinymce/tinymce-react
그리고 나서 시작할 수 있습니다. TinyMCE 자체 호스팅을 사용하려면 사용할 모든 패키지를 React 구성 요소로 가져와야 합니다.

 import React, { useState } from 'react';
 import 'tinymce/tinymce';
 import 'tinymce/icons/default';
 import 'tinymce/themes/silver';
 import 'tinymce/plugins/paste';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/image';
 import 'tinymce/plugins/table';
 import 'tinymce/skins/ui/oxide/skin.min.css';
 import 'tinymce/skins/ui/oxide/content.min.css';
 import 'tinymce/skins/content/default/content.min.css';
 import { Editor } from '@tinymce/tinymce-react';

 const App = () => {
   const [contentEditor, setContentEditor] = useState();
   const handleEditorChange = (content, editor) => {
     console.log('Content was updated:', content);
     setContentEditor(content);
   }

   return (
     <Editor
         initialValue="<p>This is the initial content of the editor</p>"
         init={{
           skin: false,
           content_css: false,
           height: 500,
           menubar: false,
           plugins: [
             'link image',
             'table paste'
           ],
           toolbar:
             'undo redo | formatselect | bold italic backcolor | \
             alignleft aligncenter alignright alignjustify | \
             bullist numlist outdent indent | removeformat | help'
         }}
         value={contentEditor}
         onEditorChange={this.handleEditorChange}
       />
     );
   }

 export default App;

init 소품에서 skin: false 및 content_css: false 를 설정해야 패키지에서 다운로드한 CSS를 얻을 수 있습니다.

구성 요소를 제어 구성 요소로 사용하려면 onEditorChange 소품 대신 onChange 소품을 사용하고 그 위에 내용을 설정할 상태가 필요합니다.

이 기사가 유용하기를 바랍니다. 읽어 주셔서 감사합니다!

참조:
https://www.tiny.cloud/docs/integrations/react/
https://github.com/tinymce/tinymce-react