Rich Text Editor (WYSIWYG) เขียนใน Svelte โดยใช้ Meltui Headless UI และ Tailwindcss CSS Framework
สร้างขึ้นที่ด้านบนของ TIPTAP Editor (Editor Editor) และ Prosemirror ใช้งานง่ายพัฒนาและบำรุงรักษา เอ็นจิ้นที่รวดเร็วที่ช่วยในการรวมกับ AI API ใด ๆ และปรับปรุงประสบการณ์การเขียน
ชุดรูปแบบ Dark/Light ได้รับการสนับสนุนและปรับแต่งได้
//npm
npm install @nextlint/svelte
//yarn
yarn add @nextlint/svelte
//pnmp
npm add @nextlint/svelteNexltint Editor ใช้ส่วนประกอบ svelte แบบไม่มีหัวจาก 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 basicaly เพียงนำเข้าชุดรูปแบบเริ่มต้นที่เรากำหนดใน EditorTheme.scss :
< script lang = " ts " >
import ' ./EditorTheme.scss ' ;
</ script >
//EditorTheme.svelte
< slot /> Nexltint Editor ใช้ nextlint/core ซึ่งเป็นตัวแก้ไขแบบไม่มีส่วนร่วมที่ติดตั้งปลั๊กอินที่มีอยู่สามารถใช้งานได้ในกรอบ UI ใด ๆ ที่เข้ากันได้กับระบบปลั๊กอิน TIPTAP และ Prosemirror
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 ค่าเริ่มต้นที่ 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 ค่าเริ่มต้นที่ (editor: Editor)=>void | undefined : undefined
การโทรกลับจะยิงเมื่อตัวแก้ไขเสร็จสิ้นการเริ่มต้น
< SvelteEditor
...
onCreated ={ editor => {
console . log ( ' The editor is created and ready to use ! ' );
}}
/> ประเภท: PluginOptions | undefined ค่าเริ่มต้นที่ PluginOptions | undefined : undefined
type PluginOptions = {
image ?: ImagePluginOptions ;
gpt ?: AskOptions ;
dropCursor ?: DropcursorOptions ;
codeBlock ?: NextlintCodeBlockOptions ;
} ; ประเภท: ImagePluginOptions|undefined : undefined
กำหนดค่าฟังก์ชั่น HandlePload และการตั้งค่า API เพื่อดึงภาพจาก unsplash
< 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 ใด ๆ ด้านข้างของตัวแก้ไข
< 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
config dropcursor color/width/class
< 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) โปรดดูไฟล์ใบอนุญาตสำหรับข้อมูลเพิ่มเติม
