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

相关推荐
IT_陈寒17 分钟前
Vite的这个问题坑了我三天,原来如此解决!
前端·人工智能·后端
网易云信18 分钟前
大模型能上岗做销售吗?我们让 12 款国产模型交了 420 份作业
前端·后端
蜗牛互联网28 分钟前
Python Agent工具调用的白名单、参数校验与审批门禁
java·服务器·前端·人工智能·后端·python
计算机魔术师33 分钟前
Perplexity:每个 Project 都是一个 Git 仓库
前端
Andrew5511 小时前
让 AI 写页面不再“一眼假”:我把设计品味做成了一个 Claude Code Skill 流水线
前端
乐享qicheng1 小时前
14-AI智能管家JSBridge深度问答
前端
10年前端老司机1 小时前
我用 Vue3 + LangGraph 做了个心理咨询 AI,踩了 9 个坑后总结出来的实战经验
前端·langchain·agent
数据掘金1 小时前
A/B 实验分组参数回滚后还在生效?一次参数校验体系的重构复盘
前端
cgblpx2 小时前
vscode的安装
ide·vscode·编辑器
bmxy小明同学2 小时前
2026-10-09-token与成本
java·前端·数据库