re editor

재 편집 ·

상자에서 풍부한 텍스트 편집기를 반응합니다

• 사용 방법
  • 상자 밖 - Antd 스타일 도구 모음을 제공하십시오
  • Custom- 편집기 코어 만 소개하고 도구 모음을 사용자 정의합니다.
• FAQ
• 지원되는 기능

특징

• 상자 밖에서 구성이 필요하지 않습니다
• 사용자 정의하면 모든 스타일의 툴바를 개발할 수 있습니다. [API 완료]
• 이미지 크기 변경과 같은 요소 기능 설정을 지원합니다
• Markdown 구문 지원
• 더보십시오

사용 방법

다른 개발 요구에 적응하기 위해 편집자는 다음 두 가지 사용 방법을 제공합니다.

상자에서 사용하십시오

재 편집자는 설치 후 사용할 수있는 캡슐화 된 구성 요소입니다. @reeditor/core 및 @reeditor/toolbar-antd를 포함합니다. 도구 모음은 기본적으로 Antd 스타일을 사용합니다. 다른 도구 모음을 사용하려면 다음 문서를 참조하십시오.

설치 종속성

$ npm install re-editor

스타일을 소개합니다

JS에 소개되었습니다

 import 're-editor/lib/styles/index.css'

CSS에서도 도입 될 수 있습니다 (CSS 전처리 지원이 필요함)

 @import 're-editor/lib/styles/index.css'

소품

재산	설명	유형
값	편집자의 가치	물체
onchange	편집기를위한 콜백은 콘텐츠를 변경합니다	(값 : 값) => void
자리 표시 자	자리 표시 자 텍스트	끈
준비 적	읽기 전용 모드	부울
onimageupload	맞춤형 사진 침대	(파일 : 파일) => 약속 <url : string>
도구	도구 모음의 디스플레이 컨텐츠를 설정하십시오	배열 <배열

도구 모음을 컨텐츠를 표시하도록 설정하십시오

tools props 지원 배열 양식, 2 차원 배열 인 경우 그룹으로 표시됩니다.

 tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
  [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
  [ 'orderedlist' , 'unorderedlist' ]
] }

이름	기능
용감한	용감한
이탤릭체	이탤릭체
밑줄	밑줄
strikethrough	줄을 삭제하십시오
주문 목록	주문 목록
UNORDEREDLIST	순서가없는 목록
표제	제목
맞추다	조정
영상	그림
테이블	시트
암호	암호
끄르다	취소
다시 하다	재 작업
전체 화면	전체 화면

사용자 정의하십시오

편집기는 컨텐츠 편집 영역과 도구 모음의 두 부분으로 나뉩니다. 다음은 도구 모음을 사용자 정의하는 방법에 대해 설명합니다

편집기 코어를 설치하십시오

$ npm install @re-editor/core

도구 모음을 만듭니다

어떤 식 으로든 편집기 도구 모음을 만들 수 있습니다. 편집기 인스턴스를 도구 모음으로 전달해야합니다. 자세한 내용은 REEDITOR 및 @Reeditor/Toolbar-ANDD의 구현을 참조 할 수 있습니다. 자세한 내용은 API 문서를 볼 수 있습니다 (문서 의이 부분은 아직 작성되지 않았으며 가까운 시일 내에 완료 될 것입니까?).

예를 들어, 대담한 기능을 구현하십시오.

 import { command } from '@re-editor/core' ;

const Demo = ( props ) => {
  function handleClick ( ) {
    command ( props . editor ) ( 'bold' )
  }
  return < div onClick = { handleClick } > bold </ div >
}

패키지 소개

• 재 편집 : 도구 모음이있는 캡슐화 된 편집기
• @Reeditor/Core : 편집기 코어
• @Reeditor/Toolbar-antd : Antd, Default를 기반으로 한 도구 모음
• @Reeditor/예제 : 데모 프로젝트

FAQ

슬레이트 나 Draft-JS와의 비교의 차이점은 무엇입니까?

슬레이트 또는 드래프트는 순수한 편집자가 아니며 편집자를 구축하는 프레임 워크와 비슷합니다. 재 편집자는 슬레이트를 기반으로 개발되었으므로构建编辑器과정에주의를 기울일 필요가 없습니다.

스타일을 수정하는 방법

스타일은 노드 (Bold, H1, H2 등)와 도구 모음의 두 부분으로 나뉩니다. 그들은 모두 CSS를 통해 기본 스타일을 다시 작성할 수 있으며 툴바는 CSS를 통해 스타일을 완전히 다시 작성할 수도 있습니다.

저장된 데이터의 양이 매번 너무 큰 경우 어떻게해야합니까?

증분 업데이트를 사용하여 OnChange 콜백의 값은 불변의 형식입니다. 불변 -JS-DIFF 및 기타 방법을 사용하여 증분 업데이트를 위해 DIFF의 내용을 얻을 수 있습니다.

업로드 이미지 서버를 지정하는 방법

이미지는 기본적으로 Base64로 저장됩니다. 지정된 서버에 이미지를 업로드 해야하는 경우 onImageUpload 함수 (파일 : 파일) => 약속 <URL : String> 샘플 코드를 사용할 수 있습니다.

기능

텍스트 장식

粗体斜体下划线删除线下标삭제합니다

목록

有序列表无序列表

조정

左对齐右对齐居中对齐两端对齐

제목

h1 h2 h3 h4 h5 h6

다른

• 图片
  • 크기를 설정하십시오
  • 클립 보드에서 복사하십시오
  • 사진 서버 주소의 사용자 정의 업로드를 지원합니다
• 表格
  • 행을 추가하십시오
  • 열을 추가하십시오
  • 행을 삭제하십시오
  • 열 삭제
• 代码高亮
  • JS
  • CSS
  • HTML
• markdown
  • H1-H6 : #
  • 인용문 : >
  • 주문 목록 : -
  • 순서 대표 목록 : 1.
• 전체 화면 편집

다른 기능은 계속 증가합니다 ...