React 에서 UMTEditor 를 사용 하 는 방법 예시

최근 프로젝트 에 서 는 부 텍스트 편집 기 를 사용 해 야 합 니 다.작은 언니 가 플랫폼 에서 일상적으로 사용 하 는 편집 기 를 참고 하여 바 이 두 의 UMTEditor 를 사용 하 는 것 을 고려 하 였 습 니 다.경 량,기능 과 설정 이 간단 하고 맞 춤 형 기능 이 많 지 않 아 UEditor 를 사용 하지 않 았 습 니 다.하지만 저 는 나중에 UEditor 의 2 차 개발 을 위 한 글 을 낼 것 입 니 다.
umeditor 도입
구성 요소 설계
우선 구성 요소 의 대략적인 내용 을 살 펴 보 자.
1.구성 요소 props:

2.구성 요소 의 핵심 구성원 속성:

3.간단 한 render:

4.UMEditor 의 예화

UMEditor 소스 코드 에서 변경 해 야 할 것 은 그림 의 요청 입 니 다.설정 에 있 는 imgUrl 은 제 가 전달 하 는 방법 입 니 다.이 방법 은 배경 을 요청 하고 Promise<{url:string}>로 돌아 갑 니 다.
원본 코드 수정
원본 코드 수정 두 파일
image.js 에서 두 군데 변경


autoupload.js 의 변경 사항

UMEditor 의 원본 코드 는 dll 디 렉 터 리 에 저장 되 어 있 으 며,포장 할 때 웹 팩 에 의 해 해당 디 렉 터 리 에 복사 되 어 UMEDITORHOME_URL 은 이 디 렉 터 리 경로 와 일치 합 니 다.

umeditor 의존 처리
파일 병합
의존 파일 이 너무 많 기 때문에,우 리 는 gulp 를 사용 하여 합병 합 시다.

core 폴 더 의 의존 도 는 core.min.js 로 합 쳐 지고 다른 plugin,ui,addapter 도 마찬가지 로 해당 하 는 min.js 로 합 쳐 집 니 다.
원래 editorapi.js 가 의존 하 는 것 을 도입 합 니 다.지금 우 리 는 스스로 방법 을 써 서 도입 합 니 다.
로 딩 의존
구성 요소 에서 도입 해 야 할 파일 을 정의 합 니 다.이것 은 2 차원 배열 입 니 다.같은 등급 의 파일 을 순서대로 도입 합 니 다.서로 다른 등급 의 동시 요청 이 가능 합 니 다.예 를 들 어['/third-party/jquery.min.js','/third-party/template.min.js']의 두 파일 을 동시에 요청 할 수 있 지만,모두 load 가 끝나 면 다음 파일 을 요청 합 니 다.

불 러 올 때 SyncRequire 방법 사용 하기

한 단계 교체 기 를 사용 하여 제어 가능 한 로드 를 실현 하 다.

loadDep 는 파일 로드 를 담당 합 니 다.구체 적 으로 다음 과 같 습 니 다.

SyncRequire 내부 에서 비동기 교체 기 를 유지 하고 교체 대상 은 모든 파일 의 로드 입 니 다.마지막 으로 for await 를 사용 하여 비동기 교 체 를 진행 합 니 다.

파일 경로 배열 이 라면 이 배열 의 파일 을 loadDep 로 동시에 불 러 올 수 있 음 을 설명 합 니 다.파일 경로 문자열 이 라면 이 파일 을 불 러 와 야 뒤의 파일 을 불 러 올 수 있 음 을 설명 합 니 다.loaders 구체 적 실현 은 다음 과 같다.

자,이 SyncRequire 방법 이 있 으 면 외부 js 나 css 파일 을 동시에 불 러 올 수 있 습 니 다.마지막 으로 콘 솔 에서 효 과 를 검증 할 수 있 습 니 다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.