Tiptap을 사용하여 브라우저에서 차세대 텍스트 편집🔥

안녕하십니까? 저는 인터넷 세계에서 가장 과소평가되는 화제 중 하나인 시리즈를 쓰기로 결정했습니다. 이것은 인터넷을 기반으로 하는 풍부한 텍스트 편집기입니다.이 시리즈에서, 나는 먼저 Tiptap를 소개하고, tiptap을 사용하여 우수한 웹 기반 텍스트 편집기를 구축하는 방법을 설명할 것이다.

요구 사항:

자바스크립트와 VueJS에 익숙하다.

VueJS 프로젝트(기존 또는 신규).

Tiptap은 VueJS를 위해 처음 디자인된 렌더링 없는 리치 텍스트 편집기입니다.Tiptap 사용Prosemirrorunder the hood, DOM을 조작할 수 있는 다양한 추상적인 도구를 제공하고 그 내용을 우리가 원하는 특정 형식으로 변환합니다.다시 말하면 일반 텍스트를 굵은 텍스트 (심지어 더 많은 것) 로 쉽게 변환할 수 있고, 반대로도 마찬가지다.
Tiptap의 또 다른 강력한 점은 편집 태그와 풍부한 텍스트 사이의 공백을 메우는 것이다.예를 들어, 제목을 사용하려면 행의 시작 부분에 "#"을 쓰고 스페이스바를 누르면 행이 H1이 됩니다.
자, 충분히 소개했습니다. 공식적인 예를 살펴보고 여행 중에 더 많은 것을 알 수 있도록 하겠습니다.tiptap.dev에서 더 많은 맞춤형 예시를 볼 수 있습니다.
이거 매혹적이지 않아요?

장치

Tiptap은 사선 NPM의 도움을 받아 설치할 수 있습니다.NPM은 NodeJS와 함께 발송됩니다.다음은 설치NPM와 Yarn에 대한 설명입니다.

npm install --save tiptap

또는

yarn add tiptap

tiptap을 설치하면 직접 사용하거나 확장자를 설치할 수 있습니다.Tiptap(Prosemirror)의 힘은 확장에 있습니다.원하는 기능을 확장자로 작성하여 Tiptap 실행 인스턴스에 삽입할 수 있으며 사용자 정의 기능이 있는 편집기가 있습니다.
Tiptap 팀은 NPM 패키지tiptap-extensions에 좋은 확장을 가지고 있다. 그들은 이러한 확장을 유지보수하여 Tiptap과 함께 일할 수 있도록 보장한다.그중 일부는 블락quote,CodeBlock,HardBreak,Heading,OrderedList,BulletList,ListItem,TodoItem,TodoList,Bold,Code,Italic,Link,Strike,Underline,History이다.
모든 것은 우리의 편집을 위해 특정한 행위를 추가하는 데 필요한 것이다.다음과 같은 방법으로 설치할 수 있습니다.

npm install --save tiptap-extensions

또는

yarn add tiptap-extensions

초기화

이 문장의 범위에 대해 우리는 기본적인 확장을 사용할 것이다. 예를 들어 굵은 글씨체, 사체, 밑줄과 제목 등이다.지금은 누구나 과거가 있기 때문에 우리도 역사의 연장을 포함한다.프로젝트에서 편집기에서 작성한 모든 JS 파일과 VueJS 구성 요소를 저장할 수 있는 새 특정 폴더를 만들 수 있습니다.내 예에서, 나는 Babel과 ESLint로 누드 VueJS 2 프로젝트를 만들었고, 내 editor 폴더에 src 라는 디렉터리를 만들었다. 아래와 같다.
새 VueJS 프로젝트를 초기화하는 데 대한 설명can be found here.
새로운 Vue 프로젝트 생성
그리고 나는 tiptap와 tiptap-extensions를 설치할 것이다.여기서 나는 한 번에 NPM이 있는 두 개의 패키지를 설치했다.우리는 그들 사이에 공간을 남겨 둘 수 있다. NPM은 우리를 위해 나머지 일을 할 것이다.

npm install --save tiptap tiptap-extensions

설치가 완료되면 tiptap을 계속 사용할 수 있습니다.js 파일이 화면 캡처에 표시되고 Tiptap을 시작합니다.

이 파일에서 Tiptap Editor의 인스턴스를 사용하려는 확장자로 초기화하고 있습니다.이제 Tiptap에서 이걸 사용할 때가 됐어요.vue.다음은 Tiptap의 내용입니다.vue가 보기에

마지막으로, 우리가 프로그램을 시작할 때, 이것이 바로 프로그램의 외관과 행동입니다.나는 https://tiptap-demo.now.sh/에 이것을 배치했다.너는 그것을 가지고 놀면서 너 자신을 체험할 수 있다

미리 보기는 역사 기록을 제외하고 우리가 보여준 모든 내용이 존재합니다. 실행 ctrl/⌘ + Z 이나 ctrl/⌘ + Y 실행 취소/재실행 기능을 제공합니다.https://tiptap-demo.now.sh/에서 직접 해보세요

Tiptap의 가장 큰 장점은 키보드 단축키가 이미 만들어져 있다는 것이다.예를 들어 굵게ctrl/⌘ + B로 활성화/비활성화, 기울임꼴ctrl/⌘ + I로 활성화/비활성화, 밑줄ctrl/⌘ + U로 활성화/비활성화

확장자를 작성할 때 키보드 단축키를 사용자 정의할 수 있지만 이 부분은 본문의 범위를 넘어섰습니다

Conclusion

본고에서 우리가 한 것은 Tiptap이나 위대한 Tiptap 커뮤니티가 제공하는 기능의 일부분일 뿐입니다.그들의 GitHub repo에는 이 기술에 대해 더욱 깊이 이해하고 있다.관리자뿐만 아니라 지역사회도 잘 확장되어 있으니 보셔도 됩니다discussion in this GitHub issue.지역 사회가 매우 멋진 확장을 제공했다. 예를 들어

• KaTex 통합
이모티콘:지원
• 수동 언어 선택 코드 블록
• 텍스트 색상, 텍스트 정렬, 텍스트 강조 표시
• Y.js를 사용하여 실시간 다중 사용자 편집

유명한 VueJS 구성 요소 프레임워크, 예를 들어 ElementUI나 VuetifyJS, 심지어 element-tiptap와 tiptap-vuetify 같은 패키지를 사용하면 대량의 추상화를 제공하여 tiptap을 프로젝트와 신속하게 통합할 수 있습니다

Tiptap 2.x

본 문서에서 사용한 TipTap 버전은 1입니다.그렇지만Tiptap 팀이 그들의 확장 라이브러리에 통합하기로 결정했기 때문에, x가 곧 출시될 것이니, 우리는 많은 지역 사회 확장을 필요로 하지 않는다.또한 Tiptap은 그 어느 때보다 쉽게 작성할 수 있기 때문에 우리는 머지않아 점점 더 많은 지역사회 개발의 Tiptap 확장 기회를 보게 될 것이다.또한, Tiptap 2는 TypeScript로 다시 작성되어 타자를 좋아하는 사람들에게는 좋은 소식입니다(TS를 싫어하는 사람들에게는 나쁜 소식이지만 그들의 회사 코드 라이브러리는 TS에 있고 그들은 여전히 학습 중입니다)

---

이것을 좋아하신다면Tiptap과Prosemirror 저장소에서 시작하여 브라우저에서 풍부한 텍스트 편집 체험을 체험하세요

당신도 this repository에서 본문에 사용된 모든 소스 코드를 찾을 수 있습니다

---

이 글은 여기까지입니다. 제 프로그래머들, 다음 글은

---

만약 이것이 당신에게 도움이 된다면, 그리고 당신이 나의 일을 지지하고 싶다면, 나에게 하나를 사주는 것을 고려해 보세요.☕️.