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

2025/12/15 小玖云代码教程 16 0

Isle-Editor 简介

Isle-Editor 中文名称是岛屿编辑器，是一款开源 Web 编辑器，支持富文本、块编辑和 MarkDown，最大的特色是除了支持传统的富文本风格外，还支持目前非常流行的 Notion Style 块编辑模式，既能够输出 HTML 作为普通富文本使用，也能够输出 JSON 作为块编辑器。

访问官网

https://editor.islenote.com/zh/

技术特性

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>

这样就完成了基础集成，编辑器已经具备了常用的编辑功能。