Pageny Editor —— 企业级富文本编辑器

产品简介

Pageny Editor 是一款基于 Vue 3 构建的功能型富文本编辑器，面向企业办公场景设计。它不仅具备完整的编辑能力，更在易用性和可配置性上做了深度打磨，让开发者可以快速集成，让用户可以高效创作。

官网：pageny.webhelp.com.cn

核心特性

一、三种编辑模式，满足不同使用习惯

• 可视化编辑：所见即所得，像写文档一样自然

• HTML源码模式：方便技术人员直接查看和编辑代码

• 纯预览模式：只读展示，适合内容分发和审阅场景

用户可根据需要随时切换，无需刷新页面。

二、灵活的工具栏配置

提供三种预设方案，开箱即用：

同时支持完全自定义，开发者可通过字符串配置精准控制按钮组合，支持分组和按钮级细粒度控制。工具栏按钮采用下拉分组设计，常用功能归为一组，界面更清爽。

三、丰富的内容创作能力

文字排版

• 字体、字号、颜色、高亮

• 加粗、斜体、下划线、删除线、上标/下标

• 多级标题（H1~H5）

• 对齐方式（左/中/右/两端）

• 缩进控制

列表与引用

• 无序列表、有序列表

• 任务清单（待办打勾）

• 引用块

多媒体与嵌入

• 图片插入（支持上传、拖拽、粘贴）

• 表格（行列操作、合并单元格、列宽调整）

• 视频/音频嵌入

• 网页链接插入

高级功能

• 代码块（含语法高亮）

• 分割线

• Emoji表情

• 撤销/重做

• 全屏沉浸模式

四、内容模板，一键套用

内置企业常用文档模板：

• 企业公告

• 项目周报

• 活动通知

• 产品更新说明

选择模板后自动填充结构和示例内容，用户只需修改文字即可快速成文，大幅提升写作效率。

五、便捷的图片上传

• 支持配置独立上传接口

• 响应式回调，灵活适配后端返回格式

• 拖拽上传、粘贴上传（截图直接粘贴）

• 图片大小和类型可限制

• 未配置上传接口时自动转为Base64内嵌，开箱即用

六、自定义扩展能力

开发者可注册自定义按钮，注入专属业务逻辑：

• 一键保存草稿

• 插入业务模板

• 调用外部系统接口

• 任何自定义操作

自定义按钮与原生工具栏无缝融合，支持图标或文字展示，并可动态控制启用/禁用状态和高亮状态。

七、其他实用功能

技术特点

• 开箱即用：一条命令安装，三行代码集成

• 轻量高效：按需加载，性能优化

• MIT协议：自由使用，无商业限制

• Vue 3原生：完全基于Composition API构建

快速开始

bash

npm install @pageny/editor

vue

<script setup>
import { PagenyEditor } from '@pageny/editor'
import '@pageny/editor/dist/style.css'

const content = ref('<p>开始编辑...</p>')
</script>

<template>
  <PagenyEditor v-model="content" />
</template>

适用场景

• 企业OA系统

• 内容管理平台（CMS）

• 项目管理工具

• 知识库/文档系统

• 邮件编辑器

• 任何需要富文本输入的场景

关于我们

Pageny Editor 由广锐团队持续维护，致力于为企业提供安全、稳定、易用的内容编辑解决方案。我们重视开发者体验和终端用户感受，欢迎使用和反馈。