canner slate editor
1.0.0
Rich Text / Wysiwyg 편집기는 모듈성 및 확장성에 중점을두고 아름다운 디자인과 고급 API를 사용하여 슬레이트 프레임 워크 위에 중점을 둡니다.
? Canner-Slate 편집자는 변조 편집기이며 모든 것이 NPM 모듈입니다! 개인 사용을 100% 구성 할 수 있습니다!
이 프로젝트는 원래 Canner에서 시작되었으므로 단일 편집자가 모든 종류의 요구 사항에 맞지 않는다는 것을 알 수 있으므로이 문제를 해결하는 유일한 방법은 모듈 식 최초 편집기를 설계하는 것이라고 생각합니다.
온라인으로 많은 다른 풍부한 텍스트와 Wysiwyg 편집기가 있지만 슬레이트로서 왜이 솔루션의 대부분이
따라서이 저장소는 슬레이트 프레임 워크가 제공하는 모든 장점을 유지하고 개발자를 위해보다 높은 수준의 API를 만들려고 노력할 것입니다. 또한 우리는 항상 모든 종류의 기여에 환영합니다! ?
이 프로젝트는 Antd를 Primiary UI 라이브러리로 사용하고 있습니다.
왜
사용의 단점 중 하나는 번들 크기가 증가한다는 것입니다. 솔루션은 여기를 참조하십시오
웹 팩 설정에 css 및 less 테스트 규칙을 추가해야합니다.
...
rules : [
{
test : / .js$ / ,
use : {
loader : "babel-loader"
} ,
exclude : / node_modules /
} ,
{
test : / .css$ / ,
use : [
{
loader : "style-loader"
} ,
{
loader : "css-loader"
}
]
} ,
{
test : / .less$ / ,
use : [
{
loader : "style-loader"
} ,
{
loader : "css-loader"
} ,
{
loader : "less-loader"
}
]
}
]
. . .이 프로젝트에는 현재 47 개 이상의 NPM 모듈이 포함되어 있으며, 모든 기능은 아이콘, 도우미, 플러그인, Utils 등과 같은 NPM 모듈로 포장되어있어 개발자는 모듈을 선택하여 자신의 사용법으로 조립할 수 있습니다.
아름다운 디자인과 함께 슬레이트 프레임 워크를 사용하는 또 다른 풍부한 텍스트 편집기
$ npm install --save canner-slate-editor또한 설치해야합니다
$ npm install antd slate slate-react
마크 다운 편집기, 핫 키 지원으로 라이브를 편집 할 수 있습니다!
$ npm install --save slate-md-editor또한 설치해야합니다
$ npm install antd slate slate-react
슬레이트 편집기를위한 20 개 이상의 슬레이트 아이콘 및 도우미.
지원되는 기능 :
더 많은 슬레이트 아이콘을 배우십시오
슬레이트 편집기를위한 슬레이트 선택기 공유.
지원되는 선택기 :
더 많은 슬레이트 선택자를 알아보십시오
React Component Wrapper를 사용한 퀼 편집기의 아이콘 추출, 65+ 아이콘을 지원하십시오!
$ npm install --save quill-icons슬레이트 플러그인 세트.
슬레이트 편집기를위한 일련의 변경 및 유틸리티 기능
편집기 유틸리티 구성 요소 세트.
저장소를 통해 상수를 공유하십시오.
더 많은 슬레이트-회의를 배우십시오
yarn Workspace를 사용하여 모든 저장소를 관리하고 Yarn Workspace에 대해 자세히 알아보십시오.
패키지를 설치하려면
yarn
데모를 참조하십시오
npm start
입력하여 바벨을 통해 JS 파일을 빌드해야합니다.
yarn run build:watch
yarn jest <...path/to/pkg> [--coverage]
Slate 데이터 모델링, 상태 업데이트, 렌더링, 편집기 스키마, 직렬화 등 편집자를 구축 할 때 어려운 부분을 처리하는 데 도움이되는 잘 설계된 강력한 편집기 프레임 워크 입니다.
이 저장소는 슬레이트 문서를 파기하는 대신 즉시 사용할 수있는 완전한 편집자 및 플러그인 솔루션을 제공하는 것을 목표로하고, 고급 구성 요소를 사용하여 슬레이트 프레임 워크 지식없이 편집자를 거의 구축 할 수 있습니다.
canner-slate-editor Ant Design이라는 멋진 React 라이브러리를 사용하고 있으며,이 라이브러리는 편집기 렌더링에 널리 사용되는 툴팁, 테이블, 모달 등과 같은 일반적으로 사용되는 반응 구성 요소를 제공합니다. 라이브러리 사용의 단점 중 하나는 번들 크기입니다. 크기 문제를 해결하려는 경우 다음에 다음을 권장합니다.
