快速开始

本指南将帮助您在几分钟内开始使用 UEditor Plus Designer。

概述

UEditor Plus Designer 是一个基于 UEditor 的可视化内容设计工具，它提供：

• 📦 开箱即用 - 简单的 API，快速集成
• 🎨 可视化编辑 - 直观的所见即所得界面
• 🧩 素材管理 - 内置素材面板和加载系统
• 🔧 高度可配置 - 灵活的配置选项
• 🌐 多平台支持 - Vue 3、React、原生 HTML

快速示例

Vue 3 项目

这是最简单的使用方式：

<template>
  <div class="container">
    <UEditorPlusDesigner
      ref="designerRef"
      :config="config"
      @ready="onReady"
      @change="onChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { UEditorPlusDesigner } from 'ueditor-plus-designer'
import 'ueditor-plus-designer/style'

const designerRef = ref(null)

const config = {
  ueditorPath: '/ueditor-plus',
  ueditorConfig: {}
}

const onReady = () => {
  console.log('编辑器已就绪')
}

const onChange = (content) => {
  console.log('内容已更改:', content)
}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>

前置要求

在开始之前，请确保您的环境满足以下要求：

Vue 3 项目

• Node.js: 20 或更高版本
• Vue: 3.4.0 或更高版本
• 构建工具: Vite 5+ 或 Webpack 5+

React 项目

• Node.js: 20 或更高版本
• React: 18.0.0 或更高版本
• Vue: 3.4.0 或更高版本（作为 peer dependency）
• Veaury: 2.2.0 或更高版本（用于 Vue-React 桥接）

原生 HTML

• UEditor Plus: 需要准备 UEditor Plus 静态文件
• 现代浏览器: Chrome、Firefox、Safari、Edge 等

准备 UEditor Plus

UEditor Plus Designer 依赖 UEditor Plus 编辑器，您需要准备 UEditor Plus 文件：

方法 1: 使用 CDN（推荐用于开发）

// 在开发环境中使用 Vite 代理
// vite.config.js
export default {
  server: {
    proxy: {
      '/ueditor-plus': {
        target: 'https://unpkg.com/ueditor-plus-main@2.0.0/dist-min/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/ueditor-plus/, ''),
      }
    }
  }
}

方法 2: 本地部署（推荐用于生产）

1. 下载 UEditor Plus
2. 将文件放置到项目的 public/ueditor-plus/ 目录
3. 确保包含以下文件：
   • ueditor.config.js
   • ueditor.all.js
   • themes/ 目录
   • lang/ 目录
   • 其他资源文件

常见问题

UEditor 加载失败？

确保 ueditorPath 配置正确，并且 UEditor Plus 文件可以正常访问。检查浏览器控制台的网络请求。

样式显示异常？

确保导入了组件样式：

import 'ueditor-plus-designer/style'

并且父容器有明确的高度：

.container {
  height: 100vh; /* 或其他明确的高度值 */
}

更多问题？

查看 常见问题 或在 GitHub Issues 提问。

获取帮助

如果遇到问题：

1. 查看本文档的其他章节
2. 查看 API 参考
3. 查看 示例项目
4. 在 GitHub 上 提出问题

使用交流

添加好友请备注 UEditorPlusDesigner

微信交流群	QQ交流群