Isle-Editor (岛屿编辑器) - 免费开源 Web 富文本编辑器，也支持 Notion 块编辑、MarkDown 语法，官方支持 Vue3 开箱即用

这是一款很有潜力的新编辑器，特别是对于喜欢 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-editor

Vue 项目中使用

<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 开源协议，基于这个协议，我们可以免费下载使用，也

可以用于商业项目

，这对企业和个人开发者都很友好。