분류 javascript

API가 있는 크로스 브라우저 풍부한 텍스트 편집기.

컨텐츠 정보

  • 조회 256 (작성일 )

본문

Quill은 호환성과 확장 성을 위해 제작 된 현대 WYSIWYG 편집기입니다.


https://quilljs.com/

https://github.com/quilljs/quill 


Quill은 호환성과 확장 성을 위해 제작 된 현대적인 서식 있는 텍스트 편집기입니다. 그것은 제이슨 첸 (Jason Chen)과 바이론 밀리 간 (Byron Milligan)이 창안했으며 슬라브 (Slab)가 적극적으로 관리했습니다.


시작하려면 https://quilljs.com/에서 설명서, 안내서 및 라이브 데모를 확인하십시오!


Why Quill 


콘텐츠 제작은 처음부터 웹의 핵심이었습니다. <textarea>는 거의 모든 웹 응용 프로그램에 고유하고 필수적인 솔루션을 제공합니다. 그러나 어떤 시점에서 텍스트 입력에 서식을 추가해야 할 수도 있습니다. 풍부한 텍스트 편집기가 있는 곳입니다. 선택할 수 있는 솔루션은 많지만 Quill은 몇 가지 현대적인 아이디어를 고려합니다.


API Driven Design 


 381/5000 서식 있는 텍스트 편집기는 사람들이 텍스트를 쓸 수 있도록 만들어 졌습니다. 그러나 놀랍게도 대부분의 서식 있는 텍스트 편집기는 사용자가 작성한 텍스트를 전혀 모릅니다. 이 편집자는 웹 개발자와 동일한 렌즈 인 DOM을 통해 콘텐츠를 볼 수 있습니다. 이것은 DOM이 불균형 트리로 구성된 노드로 구성 되었기 때문에 임피던스 불일치를 나타내지 만 텍스트는 선, 단어 및 문자로 구성됩니다.


문자가 측정 단위 인 DOM API는 없습니다. 이 제한 사항으로 인해 대부분의 서식 있는 텍스트 편집기는 "이 텍스트에 있는 텍스트는 무엇입니까?" 또는 "커서는 굵게 표시되어 있습니까?"와 같은 간단한 질문에 대답 할 수 없습니다. 이러한 프리미티브 위에 풍부한 편집 경험을 시도하는 것은 매우 어렵고 실망스럽습니다.


Quill은 편집 및 문자를 염두에 두고 설계되었으며 이러한 자연 텍스트 중심 단위 위에 API를 작성했습니다. 무언가가 굵은 글꼴인지 알아 내기 위해, <b> 또는 <strong> 노드 또는 글꼴 체중 스타일 속성을 찾기 위해 DOM을 탐색 할 필요 없이 Quill은 getFormat (5, 1) 만 호출하면 됩니다. 모든 핵심 API 호출은 액세스 또는 수정을 위해 임의의 인덱스와 길이를 허용합니다. 이벤트 API는 직관적 인 JSON 형식으로 변경 사항을 보고 합니다. HTML 또는 diff DOM 트리를 구문 분석 할 필요가 없습니다.


Custom Content and Formatting 


과거에는 서식 있는 텍스트 편집기를 평가하는 것이 원하는 형식의 체크리스트를 비교하는 것처럼 간단하지 않았습니다. 훌륭한 리치 텍스트 편집기의 마크는 단순히 지원되는 형식의 수만이었습니다. 이것은 여전히 중요한 척도이지만 하한은 무한대에 접근하고 있습니다.


450/5000 텍스트를 더 이상 인쇄하지 않습니다. 그것은 웹상에서 렌더링 되도록 작성되었는데, 이는 종이보다 훨씬 풍부한 캔버스입니다. 콘텐츠는 실시간, 대화 형 또는 공동 작업이 가능합니다. 일부 리치 텍스트 편집자 만 이미지 및 비디오와 같은 간단한 미디어를 지원할 수 있습니다. 거의 아무도 트윗이나 대화식 그래프를 내장 할 수 없습니다. 그러나 이것이 웹이 움직이는 방향입니다. 더욱 풍부하고 상호 작용합니다. 콘텐츠 작성을 지원하는 도구는 이러한 사용 사례를 고려해야 합니다.


Quill은 DOM에 대한 강력한 추상화 인 자체 문서 모델을 제공하므로 확장 및 사용자 정의가 가능합니다. Quill이 지원할 수 있는 형식 및 콘텐츠의 상한선은 무제한입니다. 사용자는 이미 임베디드 슬라이드 데크, 대화 형 체크리스트 및 3D 모델을 추가 할 때 이 도구를 사용했습니다.


Cross Platform 


크로스 플랫폼 지원은 많은 자바 스크립트 라이브러리에서 중요하지만 이 의미의 기준은 종종 다릅니다. 퀼 (Quill)의 경우, 바 (bar)는 실행되거나 작동하는 것만이 아니며 동일한 방식으로 실행되거나 작동해야 합니다. 기능은 플랫폼 간 고려 사항일 뿐만 아니라 사용자 및 개발자 경험도 있습니다. 일부 콘텐츠가 OSX에서 Chrome에서 특정 마크 업을 생성하는 경우 IE에서 동일한 마크 업을 생성합니다. Enter 키를 누르면 Firefox의 Windows에서 굵게 표시된 상태가 유지되며 모바일 Safari에 보존됩니다.


Easy to Use 


이러한 모든 이점은 사용하기 쉬운 패키지로 제공됩니다. Quill이 기본 기본값으로 배송되면 바로 자바 스크립트 몇 줄만 사용하면 됩니다.


var quill = new Quill('#editor', { modules: { toolbar: true }, theme: 'snow' });