开始
约 333 字大约 1 分钟
2025-07-04
介绍
Yuque Rich Text（语雀富文本编辑器） 是一个基于 Vue 3 封装的富文本编辑器组件，灵感来源于语雀官方编辑器的优秀体验。该组件提取自语雀 Chrome 插件的核心编辑功能，旨在为开发者提供一个简洁、强大、易于集成的富文本编辑解决方案。
本项目为第三方实现，非语雀官方产品，仅供学习与个人项目使用。
安装方式
npm
npm install yuque-rich-textyarn
yarn add yuque-rich-textpnpm
pnpm add yuque-rich-textbun
bun add yuque-rich-textdeno
deno add yuque-rich-text样式与依赖引入
为了确保编辑器正常渲染，请在项目根目录下的 index.html 页面中引入以下样式与脚本资源：
在 <head> 标签中添加：
<link
rel="stylesheet"
type="text/css"
href="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_lakex-doc/1.71.0/umd/doc.css" />
<link
rel="stylesheet"
type="text/css"
href="https://gw.alipayobjects.com/os/lib/antd/4.24.13/dist/antd.css" />在 <body> 标签底部添加：
<script
crossorigin
src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://gw.alipayobjects.com/render/p/yuyan_v/180020010000005484/7.1.4/CodeMirror.js"></script>
<script src="https://ur.alipay.com/tracert_a385.js"></script>
<script src="https://mdn.alipayobjects.com/design_kitchencore/afts/file/ANSZQ7GHQPMAAAAAAAAAAAAADhulAQBr"></script>
<script src="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_lakex-doc/1.71.0/umd/doc.umd.js"></script>使用说明
组件支持编辑与预览两种模式，提供丰富的 API 与事件回调，便于开发者灵活控制内容的读取、更新与展示。
⚠️ 注意：请勿在
onChange事件中直接修改value，否则可能导致无限递归。