[SunEditor-React] React Html editor

React 18버전에서 호환되는 Html Editor를 찾다가 아래와 같은 SunEditor를 찾게 되었다. 

 

https://github.com/mkhstar/suneditor-react/blob/master/README.md

GitHub - mkhstar/suneditor-react: A React Component for SunEditor (WYSIWYG editor)

 

 

설치

npm install --save suneditor suneditor-react

 

 

 

사용법

 

설치 후 다른 설정 없이 바로 import해서 해당 컴포넌트를 사용할 수 있다.

import SunEditor from "suneditor-react";

const HemlEditor = () => {
	return(
        	<SunEditor /> 
	)
}

 

해당 라이브러리를 사용하며 내가 사용한 설정, event를 어떻게 사용했는지 설명하자면.

 

 

- setOptions

setOptions에 buttonList를 이용하면 사용할 기능 버튼을 제한할 수 있다. 

 import SunEditor from "suneditor-react";

const HemlEditor = () => {
	return(
        	<SunEditor     
                    setOptions={{
                        buttonList: buttonList.basic,
                    }} 
          	/> 
	)
}

 

buttonList.basic	워드 처리용 기본 버튼을 포함합니다.
buttonList.formatting	포맷에 사용되는 대부분의 도구를 포함합니다.
buttonList.complex	대부분의 버튼이 추가되어있습니다.

 

또는 직접 커스텀이 가능하다.

 

[
    // Default
    ['undo', 'redo'],
    ['font', 'fontSize', 'formatBlock'],
    ['paragraphStyle', 'blockquote'],
    ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
    ['fontColor', 'hiliteColor', 'textStyle'],
    ['removeFormat'],
    ['outdent', 'indent'],
    ['align', 'horizontalRule', 'list', 'lineHeight'],
    ['table', 'link', 'image', 'video', 'audio', 'math'],
    ['imageGallery'],
    ['fullScreen', 'showBlocks', 'codeView'],
    ['preview', 'print'],
    ['save', 'template'],
    ['-left', '#fix', 'dir_ltr', 'dir_rtl'],
    // (min-width:992px)
    ['%992', [
        ['undo', 'redo'],
        [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
        ['bold', 'underline', 'italic', 'strike'],
        [':t-More Text-default.more_text', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
        ['removeFormat'],
        ['outdent', 'indent'],
        ['align', 'horizontalRule', 'list', 'lineHeight'],
        ['-right', 'dir'],
        ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template'],
        ['-right', ':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery']
    ]],
    // (min-width:768px)
    ['%768', [
        ['undo', 'redo'],
        [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
        [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle', 'removeFormat'],
        [':e-More Line-default.more_horizontal', 'outdent', 'indent', 'align', 'horizontalRule', 'list', 'lineHeight'],
        [':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery'],
        ['-right', 'dir'],
        ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template']
    ]]
  ]

 

 

- 작성한 글의 html 가져오기 : onChange

 

onChange이벤트의 첫번째 인자로 작성한 content를 제공해 준다.

 

handleChange(content){
	console.log(content); //Get Content Inside Editor
}

render() {
	return <SunEditor onChange={handleChange} />
}

 

 

 

- 작성 시 이미지 서버에 저장 : onImageUploadBefore

 

해당 이벤트를 통해 이미지 업로드 전 서버에 저장 후 서버에서 받아온 Url로 이미지를 넣어줄 수 있다.

onImageUploadBefore에서 받은 3가지 인자로 다음과 같이 사용할 수 있다. 

 const handleImageUploadBefore = (files, info, uploadHandler) => {
    (async () => {
      const src = await UploadToServer(files[0]); // 서버 요청 후 받아온 url
      const response = {
        result: [
          {
            url: src,
            name: files[0].name,
            size: files[0].size,
          },
        ],
      };
      uploadHandler(response);
    })();
    uploadHandler();
};

render() {
	return <SunEditor onImageUploadBefore={handleImageUploadBefore} />
}

 

 

handleImageUploadBefore를 작성 시 내가 넣은 이미지와, 서버로 부터 받아서 넣은 이미지 2개가 한 번에 들어가는 오류가 있어서 이와같이 작성했다. 

아래는 해당 코드 작성 시 참고한 gitHub issue이다.

 

https://github.com/JiHong88/SunEditor/issues/551

onImageUploadBefore in suneditor-react · Issue #551 · JiHong88/suneditor

 

 

그 외 옵션과 이벤트는 맨위에 넣어둔 해당 라이브러리의 Docs에 잘 정리되어있으니 참고하세요. :)