yuque-rich-text-doc

外观

开始

约 333 字大约 1 分钟

2025-07-04

介绍

Yuque Rich Text（语雀富文本编辑器） 是一个基于 Vue 3 封装的富文本编辑器组件，灵感来源于语雀官方编辑器的优秀体验。该组件提取自语雀 Chrome 插件的核心编辑功能，旨在为开发者提供一个简洁、强大、易于集成的富文本编辑解决方案。

本项目为第三方实现，非语雀官方产品，仅供学习与个人项目使用。

安装方式

npm

npm install 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，否则可能导致无限递归。