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

这是一款很有潜力的新编辑器,特别是对于喜欢 Notion 编辑体验的团队来说,值得一试。

这两天又在折腾编辑器,发现市面上的产品要么太重、要么太老,之前推荐的 TinyEditor 虽然很好用,但 UI 稍微差点,和项目风格不匹配,直到看到这款基于 ProseMirror 和 Tiptap 的编辑器,眼前一亮,推荐给大家。

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

Isle-Editor 虽然比较新,但站在了 ProseMirror 和 Tiptap 这两个巨人的肩膀上,技术架构很扎实。

最让我惊喜的是它的块编辑体验,在 Notion Style 下拖拽重组内容块,技术文档排版效率直逼 Notion。

之前也考虑过直接用 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 开源协议,基于这个协议,我们可以免费下载使用,也可以用于商业项目,这对企业和个人开发者都很友好。

原文链接:https://www.thosefree.com/isle-editor

相关推荐
ywf121514 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
恋猫de小郭14 小时前
2026,Android Compose 终于支持 Hot Reload 了,但是收费
android·前端·flutter
hpoenixf20 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特20 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷20 小时前
阶段一:从 0 看懂 JSVMP 架构,先在脑子里搭出一台最小 JSVM
前端·javascript·架构
mengchanmian21 小时前
前端node常用配置
前端
华洛21 小时前
利好打工人,openclaw不是企业提效工具,而是个人助理
前端·javascript·产品经理
xkxnq1 天前
第六阶段:Vue生态高级整合与优化(第93天)Element Plus进阶:自定义主题(变量覆盖)+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A1 天前
vue css中 :global的使用
前端·javascript·vue.js
小码哥_常1 天前
被EdgeToEdge适配折磨疯了,谁懂!
前端