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

相关推荐
Momo__26 分钟前
TypeScript satisfies 操作符——比 as 更安全的类型守门员
前端·typescript
用户21366100357227 分钟前
Vue2事件系统与指令进阶
前端·vue.js
labixiong29 分钟前
实现一个能跑的迷你版Promise(一)
前端·javascript·面试
Csvn2 小时前
`??` 和 `||` 搞混,线上用户头像全挂了
前端
kyriewen3 小时前
白宫前脚下了限制令,OpenAI 后脚就把 GPT-5.6 发了
前端·gpt·openai
用户40269244819084 小时前
CRMEB Pro 新增后台接口全链路:路由、权限、验证器、返回格式一次讲清
前端·后端
泉城老铁4 小时前
springboot+vue+ ffmpeg 实现视频的拉流播放
前端
PedroQue995 小时前
uni-router v1.8.0新增冷启动守卫补执行
前端·uni-app
xiaok5 小时前
部署之后,本地浏览器还在读取旧缓存导致页面一直显示loading中
前端
用户059540174465 小时前
Redis缓存一致性踩坑实录:线上故障排查6小时,我用pytest+内存快照把它永久关进了笼子
前端·css