Nextlint
富文本编辑器(WYSIWYG)使用Svelte,采用MeltUI 无头UI和tailwindcss CSS 框架。
基于tiptap编辑器(无头编辑器)和prosemirror开发。易于使用、开发和维护。一个帮助集成任何AI API的提示引擎,提升写作体验。
支持和可定制的暗/亮主题。
开始使用
安装
//npm
npm install @nextlint/svelte
//yarn
yarn add @nextlint/svelte
//pnpm
npm add @nextlint/svelte
设置
Nexlint编辑器使用MeltUI的无头svelte组件,并使用tailwindcss进行样式。主题令牌继承自Svelte Shadcn。
如果您的项目已经设置了shadcn,可以跳过这部分。
1. 安装tailwindcss和postcss:
pnpm add -D tailwindcss postcss autoprefixer sass
npx tailwindcss init -p
现在会生成tailwind.config.js
和postcss.config.js
2. 配置tailwind.config.js:
// 更多详细信息请访问 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 tokens进行自定义。默认令牌位置在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 />
Nexlint编辑器使用nextlint/core
,这是一个安装了现有插件的无头编辑器,可以在任何UI框架中使用,兼容tiptap和prosemirror插件系统。
Nextlint Svelte本身有一些完全用Svelte编写的插件和可配置
特性
气泡菜单
斜线菜单
图片
支持上传/嵌入/unsplash api
AI提示
选项
名称 | 类型 | 描述 |
---|---|---|
content | Content | 初始化编辑器内容 |
onChange | (editor:Editor)=>void | 编辑器内容变化时调用此回调 |
placeholder? | String | 占位符将在编辑器为空时显示 |
onCreated? | (editor:Editor)=>void | 编辑器创建完毕时触发一次此回调 |
plugins? | PluginsOptions | 自定义插件选项 |
extensions? | Extensions | 自定义编辑器扩展 |
content
类型: HTMLContent | JSONContent | JSONContent[] | null
初始化内容,可以是JSONContent或HTML标记。
// 可以是字符串
<SvelteEditor
content="<p>这是段落内容</p>"
/>
// 等同于
<SvelteEditor
...
content={{
type:'docs'
attrs:{},
content:[{
type:'paragraph',
attrs:{},
content:[{
type:'text',
text:'这是段落内容'
}]
}]
}}
/>
placeholder
类型: String | undefined
默认值: undefined
占位符将在编辑器内容为空时显示
<SvelteEditor ... content="" placeholder="按 '空格' 启动AI提示" />
onChange
类型: (editor: Editor)=>void
编辑器内容改变时(更新状态或选区)将触发此回调
<script lang="ts">
let editor;
</script>
<SvelteEditor
...
onChange={_editor => {
editor = _editor;
}}
/>
onCreated
类型: (editor: Editor)=>void | undefined
默认值: undefined
编辑器完成初始化后触发此回调
<SvelteEditor
...
onCreated={editor => {
console.log('编辑器已创建并可以使用!');
}}
/>
plugins
类型: PluginOptions | undefined
默认值: undefined
type PluginOptions = {
image?: ImagePluginOptions;
gpt?: AskOptions;
dropCursor?: DropcursorOptions;
codeBlock?: NextlintCodeBlockOptions;
};
plugins.image
类型: ImagePluginOptions|undefined
默认值: undefined
配置handleUpload函数,并设置API密钥以从unsplash获取图片
<SvelteEditor
...
plugins={
image: {
handleUpload:(file)=>{
// 在此处理上传
const blob = new Blob([file]);
const previewUrl = URL.createObjectURL(blob);
return previewUrl;
},
unsplash: {
accessKey: 'UNPLASH_API_KEY'
}
},
}
/>
plugins.ask
类型:AskOptions|undefined
默认值: undefined
在空行中触发提示,从编辑器获取问题,通过此配置调用handle函数,并将结果追加到编辑器中。 允许在编辑器外集成任何AI。
<SvelteEditor
...
plugins={
ask: async (question:string)=>{
// 配置任意AI工具以获取结果并返回
// 将结果返回给编辑器
return '来自任意AI后端的结果'
}
}
/>
plugins.dropCursor
类型: DropcursorOptions|undefined
默认值: undefined
配置dropCursor颜色/宽度/类。
<SvelteEditor
...
plugins={
dropCursor: {
width:'2px',
color:'#000',
}
}
/>
plugins.codeBlock
类型: 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)。请参阅许可证文件了解更多信息。