Meltui Headless UI 및 Tailwindcss CSS 프레임 워크를 사용하여 Svelte로 작성된 Rich Text Editor (Wysiwyg).
Tiptap 편집자 (Headless Editor) 및 ProSemirror 위에 구축되었습니다. 사용하기 쉽고 개발 및 유지 관리. AI API와 통합하고 작문 경험을 향상시키는 데 도움이되는 신속한 엔진.
다크/라이트 테마는 지원되고 사용자 정의 가능합니다.
//npm
npm install @nextlint/svelte
//yarn
yarn add @nextlint/svelte
//pnmp
npm add @nextlint/svelteNexltint 편집기는 Meltui의 헤드리스 스벨 구성 요소를 사용하여 Tailwindcss와 함께 스타일을 사용합니다. 테마 토큰은 Svelte Shadcn에서 상속됩니다.
프로젝트에 이미 Shadcn 설정이있는 경우이 부분을 건너 뛸 수 있습니다.
pnpm add -D tailwindcss postcss autoprefixer sass
npx tailwindcss init -p 이제 tailwind.config.js 및 postcss.config.js 가 만들어졌습니다
// more detail at https://www.shadcn-svelte.com/docs/installation/manual
/** @type {import('tailwindcss').Config} */
module . exports = {
content : [
'./src/**/*.{svelte,js}' ,
'./node_modules/@nextlint/svelte/dist/**/*.{svelte,ts}'
] ,
theme : {
extend : {
colors : {
border : 'hsl(var(--border) / <alpha-value>)' ,
input : 'hsl(var(--input) / <alpha-value>)' ,
ring : 'hsl(var(--ring) / <alpha-value>)' ,
background : 'hsl(var(--background) / <alpha-value>)' ,
foreground : 'hsl(var(--foreground) / <alpha-value>)' ,
primary : {
DEFAULT : 'hsl(var(--primary) / <alpha-value>)' ,
foreground : 'hsl(var(--primary-foreground) / <alpha-value>)'
} ,
secondary : {
DEFAULT : 'hsl(var(--secondary) / <alpha-value>)' ,
foreground : 'hsl(var(--secondary-foreground) / <alpha-value>)'
} ,
destructive : {
DEFAULT : 'hsl(var(--destructive) / <alpha-value>)' ,
foreground : 'hsl(var(--destructive-foreground) / <alpha-value>)'
} ,
muted : {
DEFAULT : 'hsl(var(--muted) / <alpha-value>)' ,
foreground : 'hsl(var(--muted-foreground) / <alpha-value>)'
} ,
accent : {
DEFAULT : 'hsl(var(--accent) / <alpha-value>)' ,
foreground : 'hsl(var(--accent-foreground) / <alpha-value>)'
} ,
popover : {
DEFAULT : 'hsl(var(--popover) / <alpha-value>)' ,
foreground : 'hsl(var(--popover-foreground) / <alpha-value>)'
} ,
card : {
DEFAULT : 'hsl(var(--card) / <alpha-value>)' ,
foreground : 'hsl(var(--card-foreground) / <alpha-value>)'
}
} ,
borderRadius : {
lg : 'var(--radius)' ,
md : 'calc(var(--radius) - 2px)' ,
sm : 'calc(var(--radius) - 4px)'
} ,
fontFamily : {
sans : [ 'Inter' ]
}
}
} ,
plugins : [ ]
} ;테마는 CSS 토큰을 통해 사용자 정의 할 수 있습니다. 기본 토큰은 editortheme.scss에 있습니다.
기본 테마를 사용하려면 SvelteEditor 구성 요소를 ThemeTheme 으로 래핑해야합니다.
< script lang = " ts " >
import { SvelteEditor } from ' @nextlint/svelte/EditorTheme ' ;
import EditorTheme from ' @nextlint/svelte/EditorTheme ' ;
</ script >
< div class = " editor " >
< EditorTheme >
< SvelteEditor content = " " placeholder = " Start editing... " />
</ EditorTheme >
</ div > EditorTheme 기본 사항은 EditorTheme.scss 에서 정의하는 기본 테마를 가져옵니다.
< script lang = " ts " >
import ' ./EditorTheme.scss ' ;
</ script >
//EditorTheme.svelte
< slot /> Nexltint 편집기는 기존 플러그인이 설치된 헤드리스 편집기 인 nextlint/core 사용합니다. TIPTAP 및 PROSEMIRROR 플러그인 시스템과 호환되는 모든 UI 프레임 워크에서 사용할 수 있습니다.
NextLint Svelte 자체에는 svelte 및 구성 가능한 일부 플러그인이 있습니다.
업로드/내부/Unsplash API를 지원합니다
| 이름 | 유형 | 설명 |
|---|---|---|
content | Content | 편집기 컨텐츠를 초기화하십시오 |
onChange | (editor:Editor)=>void | 편집기가 변경되면 콜백이 호출됩니다 |
placeholder? | String | 편집자가 비어있을 때 자리 표시자가 표시됩니다 |
onCreated? | (editor:Editor)=>void | 편집기가 생성되면 콜백이 한 번 트리거됩니다. |
plugins? | PluginsOptions | 플러그인 옵션을 사용자 정의합니다 |
extensions? | Extensions | 편집기 확장을 사용자 정의합니다 |
유형 : HTMLContent | JSONContent | JSONContent[] | null
컨텐츠 초기화는 JSONCONTENT 또는 HTML 마크 업일 수 있습니다.
// Can be string
< SvelteEditor
content = "<p>this is a paragraph content</p>"
/ >
// which is equal
< SvelteEditor
...
content = { {
type : 'docs'
attrs : { } ,
content : [ {
type : 'paragraph' ,
attrs : { } ,
content : [ {
type : 'text' ,
text : 'this is a paragraph content'
} ]
} ]
} }
/ > 유형 : String | undefined 기본값 : undefined
편집기 콘텐츠가 비어있을 때 자리 표시자가 표시됩니다
< SvelteEditor ... content = " " placeholder = " Press 'space' to trigger AI prompt " /> 유형 : (editor: Editor)=>void
편집기가 변경되면 콜백이 시작됩니다 (상태 또는 선택 업데이트)
< script lang = " ts " >
let editor;
</ script >
< SvelteEditor
...
onChange ={ _editor => {
editor = _editor ;
}}
/> 유형 : (editor: Editor)=>void | undefined 기본값 : undefined
편집기가 초기화되면 콜백이 시작됩니다
< SvelteEditor
...
onCreated ={ editor => {
console . log ( ' The editor is created and ready to use ! ' );
}}
/> 유형 : PluginOptions | undefined 기본값 : undefined
type PluginOptions = {
image ?: ImagePluginOptions ;
gpt ?: AskOptions ;
dropCursor ?: DropcursorOptions ;
codeBlock ?: NextlintCodeBlockOptions ;
} ; 유형 : ImagePluginOptions|undefined 기본값 : undefined
Unsplash에서 이미지를 가져 오려는 handleUpload 함수 및 설정 API 키를 구성하십시오.
< SvelteEditor
...
plugins ={
image : {
handleUpload :( file ) => {
// handle upload here
const blob = new Blob ([ file ]);
const previewUrl = URL . createObjectURL ( blob );
return previewUrl ;
},
unsplash : {
accessKey : ' UNPLASH_API_KEY '
}
},
}
/> 유형 : AskOptions|undefined 기본값 : undefined
빈 줄에서 프롬프트를 트리거하고 편집기에서 질문을 받고이 구성을 통해 핸들 기능을 호출하고 편집기에 결과를 추가하십시오. 편집기의 모든 AI Out과 통합 할 수 있습니다.
< SvelteEditor
...
plugins ={
ask : async ( question : string ) => {
// config any AI tool to get the result and return
// the result to the editor
return ' result from any AI Backend '
}
}
/> 유형 : DropcursorOptions|undefined 기본값 : undefined
구성 DROPCURSOR 색상/너비/클래스.
< SvelteEditor
...
plugins ={
dropCursor : {
width : ' 2px ' ,
color : ' #000 ' ,
}
}
/> 유형 : NextlintCodeBlockOptions|undefined
기본:
{
themes : {
dark : 'github-dark' ,
light : 'github-light'
} ,
langs : [ ]
} codeBlock 테마는 theme 소품과 동기화됩니다.
< SvelteEditor
//....
content ={ ' ' }
onChange ={ editor . set }
theme = " light "
plugins ={{
codeBlock : {
langs : [ ' c ' , ' sh ' , ' javascript ' , ' html ' , ' typescript ' ],
themes : {
dark : ' vitesse-dark ' ,
light : ' vitesse-light '
}
}
}}
/>기여 가이드 라인을 따르십시오
MIT 라이센스 (MIT). 자세한 내용은 라이센스 파일을 참조하십시오.
