使用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 '
}
}
}}
/>请遵循贡献指南
麻省理工学院许可证（麻省理工学院）。请参阅许可证文件以获取更多信息。
