这是一款很有潜力的新编辑器，特别是对于喜欢 Notion 编辑体验的团队来说，值得一试。
这两天又在折腾编辑器，发现市面上的产品要么太重、要么太老，之前推荐的 TinyEditor 虽然很好用，但 UI 稍微差点，和项目风格不匹配，直到看到这款基于 ProseMirror 和 Tiptap 的编辑器，眼前一亮，推荐给大家。
Isle-Editor 简介
Isle-Editor 中文名称是岛屿编辑器，是一款开源 Web 编辑器，支持富文本、块编辑和 MarkDown，最大的特色是除了支持传统的富文本风格外，还支持目前非常流行的 Notion Style 块编辑模式，既能够输出 HTML 作为普通富文本使用，也能够输出 JSON 作为块编辑器。
技术特性
Isle-Editor 虽然比较新，但站在了 ProseMirror 和 Tiptap 这两个巨人的肩膀上，技术架构很扎实：
| 特性 | 亮点 |
|---|---|
| 多模式编辑 | 支持块编辑、富文本、Markdown、Notion Style 等多种模式 |
| 开箱即用 | 无需复杂配置，几行代码即可快速接入项目 |
| 框架无关 | 优先支持 Vue 视图，更多框架视图正在排期中 |
| 高度可扩展 | 内置丰富的可插拔扩展，支持自定义扩展 |
| 主题定制 | 支持自定义主题样式，内置 light、dark 两种主题 |
最让我惊喜的是它的块编辑体验，在 Notion Style 下拖拽重组内容块，技术文档排版效率直逼 Notion。
为什么选择 Isle-Editor
之前也考虑过直接用 Tiptap，但 Tiptap 是无头的，不提供 UI 视图，需要自己处理各种扩展的实现和视图层，开发成本很高，最近浏览器 Tiptap 发现，貌似官方也提供了 UI 视图版本，不过是需要付费的。
Isle-Editor 的目标很明确：为开发者提供一套完全开箱即用的富文本编辑器，无需复杂配置就能快速集成。它复用了 Tiptap 的核心实现，同时提供了完整的 UI 视图和更多核心扩展，一番体验下来，就算是国内用户，使用起来也很得心应手，不像有些编辑器习惯于服务英文用起来别扭。
如果恰巧正在用 Tiptap 开发项目，还可以无缝使用 Isle-Editor 的核心扩展，它可以说是 Tiptap 的一个最佳实践。
开发上手体验
官网说只需几行代码，考虑到实际项目需求较复杂，下面是最简单直接的接入方案：
安装依赖
npm install isle-editorVue 项目中使用
<script setup>
import { IsleEditor } from 'isle-editor'
import 'isle-editor/dist/style.css'
const content = '请开始你的创作...'
</script>
<template>
<IsleEditor v-model="content" />
</template>这样就完成了基础集成，编辑器已经具备了常用的编辑功能。
适用场景
Isle-Editor 特别适合以下开发场景：
- 内容创作：博客、文档、笔记等内容创作
- 协同编辑：团队协作、实时编辑场景
- 富文本编辑：需要图片、视频、表格等富文本内容
- 自定义编辑器：需要根据业务需求定制专属编辑器，比如 admin 中后台管理系统
建议先访问官方在线演示快速体验功能，看看这款编辑器的 UI 界面、块编辑和 Notion Style 是否符合你的需求。如果正好需要这种现代化的编辑体验，Isle-Editor 是个很不错的选择。
注意事项
在实际集成过程中，我遇到了几个需要注意的地方：
模式选择要明确：如果是普通富文本需求，输出 HTML 就够了；如果需要更结构化的数据，建议用 JSON 格式的块编辑模式。
自定义扩展要循序渐进：虽然支持自定义扩展，但建议先熟悉内置扩展，再按需添加自定义功能。
主题定制有讲究：内置的 light 和 dark 主题已经够用，如果需要深度定制，建议参考源码的样式结构。
免费开源说明
Isle-Editor 是一个免费开源的 JavaScript 富文本编辑器，项目采用 MIT 开源协议，基于这个协议，我们可以免费下载使用，也可以用于商业项目，这对企业和个人开发者都很友好。
