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

相关推荐
冴羽6 分钟前
2026 年前端必须掌握的 4 个 CSS 新特性!
前端·javascript·css
rgeshfgreh19 分钟前
Python流程控制:从条件到循环实战
前端·数据库·python
狗头大军之江苏分军26 分钟前
告别旧生态:Ant Design 6 不再支持 IE 与现代前端趋势解读
前端·javascript·后端
C_心欲无痕27 分钟前
nginx - 开启 gzip 压缩
运维·前端·nginx
闲云一鹤32 分钟前
2026 最新 ComfyUI 教程 - 本地部署 AI 生图模型 - Z-Image-Turbo
前端·人工智能·ai编程
开开心心_Every34 分钟前
安卓后台录像APP:息屏录存片段,行车用
java·服务器·前端·学习·eclipse·edge·powerpoint
狗头大军之江苏分军36 分钟前
Ant Design 6.0 正式发布:从 V5 到 V6 有哪些变化?
前端
优弧43 分钟前
Claude 终于对普通人下手了!Cowork 发布,你的最强 AI 打工搭子来了!
前端·后端
Zoey的笔记本1 小时前
敏捷与稳定并行:Scrum看板+BPM工具选型指南
大数据·前端·数据库·python·低代码
文心快码BaiduComate1 小时前
0代码手写!体验百度Comate的“魔法”:我造了个会理解情绪的中介层
前端·程序员·前端框架