dev
전체 보기
javascript
server
pages-keywords dev
react 용 웹에디터 - flyeditor

flyeditor

flyeditor 는 ``React`` 환경에서 간편하게 사용할 수 있는 위지윅(WYSIWYG) 웹에디터 컴포넌트입니다.




설치

  1. npm i flyeditor


기본 사용법

  1. import React, { useState } from 'react';
  2. import FlyEditor from 'flyeditor';
  3. import 'flyeditor/dist/flyeditor.css';

  5. const MyEditor = () => {
  6. const [initContent, setInitContent] = useState('<p>안녕하세요!</p>');
  7. const [content, setContent] = useState('');
  8. const [isEditable, setIsEditable] = useState(true);

  10. return (
  11. <div className="my-container">
  12. <FlyEditor
  13. value={initContent}
  14. editable={isEditable}
  15. onChange={setContent}
  16. />
  17. </div>
  18. );
  19. };

  21. export default MyEditor;


뷰어 설정

  1. import { FlyView } from 'flyeditor';
  2. import 'flyeditor/dist/flyeditor.css';
  3. ...

  5. const MyViewer = () => {

  7. const [dbContent, setDbContent] = useState('');

  9. useEffect(()=>{
  10. // 예시: 서버 데이터 조회 API 호출
  11. const res = await api.getContent();
  12. setDbContent(res);
  13. }, [])

  15. return (
  16. <div className="my-viewer-container">
  17. <FlyView value={dbContent} />
  18. </div>
  19. );
  20. ...

  22. }



테스트, 가이드 문서

https://flyeditor.dev/


npm 링크

https://www.npmjs.com/package/flyeditor

flyeditor
웹에디터
에디터
react webeditor
리액트용 웹에디터
react editor
리액트 에디터
리액트 웹에디터
09.11 00:38185206
댓글 (0)
등록된 댓글이 없습니다.