elm rte toolkit
1.0.0
Elm에서 풍부한 텍스트 편집기를 만듭니다.
Rich Text Editor Toolkit은 웹에서 크로스 플랫폼 편집기를 만드는 오픈 소스 프로젝트입니다. 이 패키지는 내용을 I/O 장치로 취급하고 브라우저 이벤트 및 돌연변이 관찰자를 사용하여 변경 사항을 감지하고 자체 업데이트합니다. 편집자 모델은 귀하의 요구에 맞는 사용자 정의에 맞춤 편집기를 만들 수있는 프로그래밍 가능한 사양으로 정의되고 검증됩니다.
이 패키지는 ProSemirror, Trix 및 DraftJS와 같은 다른 풍부한 텍스트 편집기 프레임 워크에서 크게 영감을 받았습니다.
이 패키지에는 일부 웹 컴포넌트가 시작해야합니다.
ES6을 지원할 수있는 경우 프로젝트에 JS/ELMEDITOR.JS를 포함하여 좋아하는 WebComponent PolyFill과 함께 가져올 수 있습니다.
import '@webcomponents/webcomponentsjs/webcomponents-bundle.js'
import 'elmEditor.js'이 저장소의 데모는 그렇게합니다.
그러나 Bundler와 Polyfill을 사용하려면 좋아하는 PolyFill을 가져 와서 NPM을 사용하여 ES5로 컴파일 된이 저장소의 JS가있는 NPM 패키지를 가져올 수 있습니다.
npm install --save @webcomponents/webcomponentsjs
npm install --save elm-rte-toolkitJavaScript에서는 다음과 같이 가져올 수 있습니다.
import '@webcomponents/webcomponentsjs/webcomponents-bundle.js'
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'
import 'elm-rte-toolkit' ; 편집기에 원하는 스타일을 사용할 수 있지만 다음을 점프 오프 지점으로 사용할 수 있습니다. 가장 중요한 것은 아마도 white-space: pre-wrap; 여러 공간을 구별하기 위해 :
. rte-main {
text-align : left;
outline : none;
user-select : text;
-webkit-user-select : text;
white-space : pre-wrap;
word-wrap : break-word;
}
. rte-hide-caret {
caret-color : transparent;
}이 패키지는 오픈 소스 소프트웨어이며 BSD-3-Clause 라이센스의 조건에 따라 자유롭게 배포 할 수 있습니다. 소스 코드는 Github에서 호스팅됩니다.
GitHub 문제 추적기의 버그 보고서, 풀 요청 또는 사려 깊은 토론의 형태로 기여를 환영합니다. 기고자에 대한 서약에 대한 행동 강령을 참조하십시오.
데모는 Create-Elm-App으로 부트 스트랩되었습니다. elm-app 명령을 설치하는 방법에 대한 지침은 해당 저장소를 참조하십시오.
로컬로 데모를 디버깅하려면 리포지토리의 루트 디렉토리에서 다음을 실행하십시오.
cd demo
elm-app start데모를 구축하려면 저장소의 루트 디렉토리에서 다음을 실행하십시오.
cd demo
./build.sh데모는 GH-PAGE로 호스팅되므로 데모를 업데이트하려면 최신 빌드로 GH-PAGE 지점을 업데이트하십시오.
지금은 Elm-test의 신비한 패키지 문제로 인해 디버그하고 싶지 않습니다. 패키지 테스트는 데모 앱 폴더에 있습니다. 테스트 실행 :
cd demo
elm-test
