dev
전체 보기
javascript
server
pages-keywords dev
flyeditor 1.2.2

flyeditor 1.2.2






에디터 삽입

  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="myeditor-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="myviewer-container">
  17. <FlyView value={dbContent} />
  18. </div>
  19. );
  20. ...

  22. }


테스트 및 개발 가이드는 아래 링크에서...

https://flyeditor.dev/


flyeditor
react webeditor
리액트 웹에디터
웹에디터
webeditor
09.07 21:5361
댓글 (0)
등록된 댓글이 없습니다.