🎨
可视化设计
直观的可视化界面，拖拽式操作，所见即所得的内容编辑体验
UEditor Plus Designer可视化内容设计工具
基于 UEditor 的现代化可视化编辑器，支持 Vue 3、React 和原生 HTML
Skip to content
界面预览
快速预览
Vue 3 项目
vue
<template>
<UEditorPlusDesigner
ref="designerRef"
:config="editorConfig"
@ready="handleReady"
@change="handleChange"
/>
</template>
<script setup>
import { ref } from 'vue'
import { UEditorPlusDesigner } from 'ueditor-plus-designer'
import 'ueditor-plus-designer/style'
const designerRef = ref(null)
const editorConfig = {
ueditorPath: '/ueditor-plus',
ueditorConfig: {
autoHeightEnabled: false
}
}
const handleReady = () => {
console.log('Editor is ready')
}
const handleChange = (content) => {
console.log('Content changed')
}
</script>React 项目
tsx
import React, { useRef } from 'react'
import { UEditorPlusDesigner } from 'ueditor-plus-designer/react'
import 'ueditor-plus-designer/style'
function App() {
const designerRef = useRef(null)
const config = {
ueditorPath: '/ueditor-plus',
ueditorConfig: {}
}
const handleReady = () => {
console.log('Designer ready')
}
return (
<UEditorPlusDesigner
ref={designerRef}
config={config}
onReady={handleReady}
/>
)
}原生 HTML
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/ueditor-plus-designer.standalone.css">
</head>
<body>
<div id="designer-container"></div>
<script src="path/to/ueditor-plus-designer.standalone.js"></script>
<script>
const designer = UEditorPlusDesigner.createDesigner({
ueditorPath: '/ueditor-plus',
ueditorConfig: {}
});
designer.on('ready', function() {
console.log('Designer ready');
});
designer.mount('#designer-container');
</script>
</body>
</html>为什么选择 UEditor Plus Designer？
🚀 开箱即用
无需复杂配置，几分钟内即可将可视化编辑器集成到您的项目中。提供合理的默认配置，同时保留完全的自定义能力。
💡 灵活强大
支持自定义素材加载器，可以轻松对接现有的内容管理系统。提供完整的事件系统，满足各种业务场景需求。
🎯 生产就绪
基于成熟的 UEditor 编辑器构建，经过大量实际项目验证。完善的 TypeScript 支持，确保代码质量和可维护性。
🌐 现代化技术栈
采用 Vue 3 + TypeScript + Vite 构建，拥抱现代前端开发最佳实践。提供 React 适配方案，满足不同技术栈的需求。
兼容性
- Vue 3: 3.4.0 或更高版本
- React: 18.0.0 或更高版本（需要 Veaury 桥接）
- UEditor Plus: 2.0.0 或更高版本
- 浏览器: Chrome、Firefox、Safari、Edge 等现代浏览器
- Node.js: 20 或更高版本（开发环境）
社区与支持
- GitHub Issues - 报告问题和功能请求
- GitHub Discussions - 社区讨论
- 更新日志 - 查看最新更新
开源协议
UEditor Plus Designer 基于 Apache 2.0 协议开源。
使用说明：
- ✅ 压缩版免费使用：编译后的压缩版本可用于个人学习、非商业项目和开发测试
- 💼 商业使用需授权：生产环境部署、商业产品或盈利性项目需要购买商业授权
- 📦 源码访问需授权：查看、修改或分发源代码需要获得授权
如需商业授权，请访问 GitHub 仓库 联系我们。