tipex 다운로드 - tipex 소스 코드 다운로드

tipex

기타 소스코드

1.0.0

다운로드

티펙스

Tipex는 강력한 프레임워크인 Tiptap 및 Prosemirror를 사용하여 세심하게 설계된 Svelte에 맞춤화된 고급 서식 있는 텍스트 편집기입니다. 이를 통해 개발자는 서식 있는 텍스트 편집기를 손쉽게 제작할 수 있으므로 기본 기술, 스타일 관리 및 관련 복잡성의 복잡성으로부터 해방됩니다.

Svelte5 및 룬 모드가 활성화되었습니다! ?

주요 특징

Svelte 5 Ready : 룬 및 스니펫을 포함한 Svelte 5의 최신 기능으로 제작되었습니다.
맞춤형 컨트롤 : 기본 옵션과 맞춤형 옵션을 모두 갖춘 유연한 컨트롤 시스템
플러그인 아키텍처 : Tiptap 확장을 통해 확장 가능
반응형 : 데스크톱과 모바일 장치 모두에서 잘 작동합니다.
부동 메뉴 : 향상된 편집 경험을 위한 상황 인식 부동 도구 모음
링크 관리 : 미리보기 및 편집 기능이 포함된 링크 처리 기능 내장
테마 지원 : CSS 변수 및 유틸리티 클래스를 사용한 손쉬운 스타일링
성능 최적화 : 원활한 편집을 위해 Svelte의 반응성을 활용합니다.
TypeScript 지원 : 더 나은 개발 경험을 위한 전체 TypeScript 지원

설치

NPM에서 패키지를 설치합니다.

 npm 설치 "@friendofsvelte/tipex"

기본 사용법

구성 요소를 가져와 구성 요소에서 사용합니다.

 <script lang="ts"> "@friendofsvelte/tipex"에서 {Tipex}를 가져옵니다.        let body = `<p>이 <a target="_blank" rel="noopener noreferrer" href="">콘텐츠</a>는 <a target="_blank" rel="noopener noreferrer" href="에 의해 작성되었습니다. 2023년에는 http://bishwas.net/">비슈와스</a></p>`;</script>

<티펙스
     {body}는 floatstyle="margin-top: 1rem; margin-bottom: 0;"class="h-[70vh] border border-neutral-200"/>을 제어합니다.

핵심 개념

제어 모드

Tipex는 두 가지 제어 모드를 제공합니다.

기본 컨트롤 ( controls={true} ):

사전 구축된 서식 도구 모음
utilities 소품을 통해 사용자 정의 가능
빠른 구현에 적합

사용자 정의 컨트롤 ( controls={false} ):

편집기 인터페이스에 대한 모든 권한
사용자 정의 구현을 위해 controlComponent 사용
특수한 사용 사례에 이상적

확장 시스템

Tipex는 향상된 기능을 위해 Tiptap의 확장 시스템을 활용합니다.

 import { Tipex } from "@friendofsvelte/tipex";import { TextAlign } from '@tiptap/extension-text-align';const Extensions = [TextAlign.configure({types: ['heading', 'paragraph'],} ),];// 컴포넌트<Tipex {extensions} />에서 사용

플로팅 메뉴

부동 메뉴는 상황에 맞는 서식 옵션을 제공합니다.

 <Tipex float /> // 플로팅 메뉴를 활성화합니다.

고급 사용법

맞춤형 머리 및 발 섹션

Svelte 5 스니펫을 사용하여 편집기 위 또는 아래에 사용자 정의 구성 요소를 추가합니다.

 <script lang="ts"> "@friendofsvelte/tipex"에서 {Tipex}를 가져옵니다.        let body = "";</script>

<티펙스 {본문}>
    {#스니펫 헤드(편집자)}
        <CustomHeader {편집기} />
    {/단편}

        {#스니펫 발(편집자)}
        <CustomFooter {편집자} />
    {/단편}
</Tipex>

맞춤형 유틸리티

기본 도구 모음을 유지하면서 사용자 정의 컨트롤을 추가합니다.

 <script lang="ts"> "@friendofsvelte/tipex"에서 {Tipex}를 가져옵니다.        let body = "";</script>

<Tipex {body} 컨트롤>
    {#snippet 유틸리티(편집기)}
        <CustomFormatting {editor} />
    {/단편}
</Tipex>

사용자 정의 컨트롤 구성 요소

완전히 맞춤화된 제어 인터페이스를 만드세요:

 <script lang="ts"> "@friendofsvelte/tipex"에서 {Tipex}를 가져옵니다.        let body = "";</script>

<Tipex {body} 컨트롤={false}>
    {#snippet controlComponent(편집기)}
        <MyCustomControls {편집기} />
    {/단편}
</Tipex>