剪藏#剪藏#鹏魔王
【软件推荐】开源 Web 现代富文本编辑器——支持富文本、块、markdown 编辑，高效且开箱即用
2026 年 2 月 20 日 约 1 分钟
我能为你提供什么服务？
网站建设 | 小程序开发 | 软件定制
我是鹏魔王，一个做网站、小程序的程序员，记录生活日常、及技术分享。
本欲起身离红尘，奈何影子落人间，欢迎关注，祝大家早日实现财务自由！
什么是 isle-editor?
isle-editor 是一款开源 Web 编辑器，支持富文本、块、markdown 编辑，高效且开箱即用，基于 prosemirror 和 tiptap。
我们希望通过 isle-editor 让开发人员能够轻松地为他们的应用添加文本编辑，相对于市面上的开源编辑器，isle-editor 是 新 的，它除了支持普通的富文本风格外，还支持流行的 Notion Style 风格。
您可以输出 HTML 将它作为一个普通的富文本编辑器，也可以输出 JSON 将它作为一个块编辑器。
考虑到可扩展性，您可以使用我们内置的组合扩展包快速搭建编辑器，也可以选择性使用我们的核心扩展一步一步的定制您的编辑器，同时您还可以自定义扩展丰富编辑器的功能。
Vue3 中使用 isle-editor
JAVASCRIPT
npm install @isle-editor/core @isle-editor/vue3
# or
yarn add @isle-editor/core @isle-editor/vue3
# or
pnpm add @isle-editor/core @isle-editor/vue3引入样式
JAVASCRIPT
import "@isle-editor/vue3/dist/style.css";使用组件
JAVASCRIPT
<template>
<div style="width: 1000px">
<IsleEditor v-model="content" :extensions="extensions"></IsleEditor>
</div>
</template>
<script setup>
import { ref } from "vue";
import { IsleEditor, BasicKit } from "@isle-editor/vue3";
const content = ref("");
const extensions = [
BasicKit.configure({
placeholder: {
placeholder: "写点什么...",
},
}),
];
</script>详细使用教程自己去看看文档
项目地址：https://editor.islenote.com/zh/
在线演示：https://playground.islenote.com/