使用Meltui無頭UI和TailWindCSS CSS框架，用Svelte編寫了豐富的文本編輯器（Wysiwyg）。
建在Tiptap編輯器（無頭編輯器）和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 Basicy只是導入我們在EditorTheme.scss中定義的默認主題：
< script lang = " ts " >
import ' ./EditorTheme.scss ' ;
</ script >
//EditorTheme.svelte
< slot /> Nexltint Editor使用nextlint/core ，它是一個無頭的編輯器，其中安裝了現有插件，可在任何UI框架中使用，與Tiptap和Prosemirror插件系統兼容。
Nextlint Svelte本身俱有一些完全用Svelte編寫的插件
支持上傳/嵌入/Unplash 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
配置handleupload函數和設置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顏色/寬度/類。
< 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 '
}
}
}}
/>請遵循貢獻指南
麻省理工學院許可證（麻省理工學院）。請參閱許可證文件以獲取更多信息。
