nextlint

项目介绍：Nextlint

Nextlint 是一个基于 Svelte 创建的所见即所得的富文本编辑器（WYSIWYG），其外观使用 MeltUI 头部无界面和 tailwindcss 框架构建。这个编辑器结合了 tiptap 和 prosemirror 等技术，是一个易于使用、开发和维护的工具。此外，Nextlint 支持黑暗/明亮主题，并且可以进行自定义，提供的提示引擎便于与任意 AI API 集成，进而提升写作体验。

开始使用

安装

用户可以通过以下命令安装 Nextlint：

//使用 npm 安装
npm install @nextlint/svelte

//使用 yarn 安装
yarn add @nextlint/svelte

//使用 pnmp 安装
npm add @nextlint/svelte

设置

Nextlint 编辑器使用 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：

module.exports = {
  content: [
    './src/**/*.{svelte,js}',
    './node_modules/@nextlint/svelte/dist/**/*.{svelte,ts}'
  ],
  theme: {
    extend: {
      colors: {
        //颜色定义...
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)'
      },
      fontFamily: {
        sans: ['Inter']
      }
    }
  },
  plugins: []
};

主题可以通过 css 代币来进行自定义，默认代币位于 EditorTheme.scss 文件中。

使用

要使用默认主题，需要将 SvelteEditor 组件包裹在 EditorTheme 中：

<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 中定义的默认主题。

功能特性

气泡菜单

提供了气泡菜单的支持，方便用户进行快速操作。

斜杠菜单

支持通过斜杠菜单快速插入内容。

图片

支持图片的上传、嵌入及通过 Unsplash API 获取。

AI 提示

允许集成AI提示，从而增强写作功能。

选项和配置

Nextlint 提供多种配置选项，允许用户自定义编辑器行为：

内容 (content)：初始化编辑器的内容，可以是HTML或者JSON格式。
占位符 (placeholder)：当编辑器为空时显示的文本。
变化事件 (onChange)：编辑器内容变更时调用的回调函数。
创建事件 (onCreated)：编辑器创建完成后调用的回调函数。
插件 (plugins)：允许配置如图片上传、AI问答等的插件选项。
扩展 (extensions)：用于自定义编辑器扩展。

插件配置实例

例如，可以配置图片上传插件：

<SvelteEditor
  ...
  plugins={
    image: {
      handleUpload:(file)=>{
        const blob = new Blob([file]);
        const previewUrl = URL.createObjectURL(blob);
        return previewUrl;
      },
      unsplash: {
        accessKey: 'UNPLASH_API_KEY'
      }
    },
  }
/>