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

相关推荐
xingpanvip1 天前
星盘接口开发文档:日运语料接口指南
android·开发语言·前端·css·php·lua
网络点点滴1 天前
Node.js理论-Web的基本运作原理
前端·node.js
宝宝宝阿1 天前
前端访问后台接口存在跨域问题,如何处理解决
前端
广州华水科技1 天前
北斗GNSS与单北斗变形监测在水库安全监测中的应用探索
前端
蜡台1 天前
使用 html javascript 实现 金币落袋效果
前端·javascript·html
IT_陈寒1 天前
为什么我的Python multiprocessing总是卡在join()?
前端·人工智能·后端
李白的天不白1 天前
VUE依赖配置问题
前端·javascript·vue.js
m0_738120721 天前
后渗透维权提权基础——CTF模拟红队进行权限维持(二)
前端·网络·windows·python·安全·php
AC赳赳老秦1 天前
团队知识库搭建:用 OpenClaw 自动整理会议纪要、技术方案、故障复盘,同步到 Confluence / 语雀
开发语言·前端·python·github·visual studio·deepseek·openclaw
之歆1 天前
Day05_CSS完整博客笔记(下)
前端·css·笔记