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. <FlyEditor
  12. value={initContent}
  13. editable={isEditable}
  14. onChange={setContent}
  15. />
  16. );
  17. };

  19. export default MyEditor;


뷰어 설정

  1. import 'flyeditor/dist/flyeditor.css';
  2. ...

  4. const MyViewer = () => {

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

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

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

  21. }


주요 기능 (Features)

자유로운 모드 전환: editable 속성을 통해 편집 모드와 읽기 전용(Viewer) 모드를 손쉽게 전환할 수 있습니다.

다양한 이미지 업로드 방식 지원: 단일 및 다중 파일 업로드 콜백 지원 (onUploadImage, onUploadImages)

에디터 내 직접 드래그 앤 드롭(Drag & Drop) 업로드 지원

외부 상태(insertImageSource)를 통한 동적 이미지 URL 직접 삽입 기능

자유로운 커스텀 툴바 (Toolbar): 가로(toolsH) 및 세로(toolsV) 툴바 항목을 원하는 구성으로 자유롭게 배치 및 제한할 수 있습니다.

커스텀 폰트 & 크기 설정: 기본 글꼴 및 크기 지정은 물론, 사용자가 사용할 폰트 목록(userFontFamilyList)과 크기 목록(userFontSizeList)을 커스텀 정의할 수 있습니다.

노트 줄 배경 모드: useNoteLine 옵션을 활성화하여 공책/노트 형태의 배경 라인 스타일을 적용할 수 있습니다.

다국어 및 UX 편의기능: 한국어/영어 UI 언어 셋(lang), 툴바 툴팁, 자동 포커스, 단축키(Ctrl+S / Cmd+S) 저장 콜백을 지원합니다.




테스트 자세한 사용법은 아래 링크를 참조 하세요

https://flyeditor.dev/

flyeditor
웹에디터
에디터
react webeditor
리액트용 웹에디터
react editor
리액트 에디터
리액트 웹에디터
08.25 15:28185049
댓글 (0)
등록된 댓글이 없습니다.
react 용 웹에디터 - flyeditor - dev