【ueditor-plus】开源下载和安装教程

1、项目介绍

UEditor Plus是基于百度UEditor二次开发的现代化富文本编辑器，主要优化了UI设计、插件兼容性和文档导入功能。支持Word(docx)、Markdown(md)文档一键导入，提供更简洁的配置化上传接口，并完全兼容原生UEditor的API。

2、项目下载位置

• GitHub仓库：modstart-lib/ueditor-plus
• Gitee镜像仓库：modstart-lib/ueditor-plus
• 直接下载压缩包：在仓库页面点击"Clone/Download"按钮获取dist-min或dist目录

3、项目安装环境配置

![环境配置示意图]

1. 基础环境：
   • Node.js 12+（用于打包开发）
   • Java/PHP/Python等任意后端语言（用于文件上传处理）
2. 前端依赖：
   • Vue项目需安装vue-ueditor-wrap
   • React项目需安装react-ueditor-wrap

4、项目安装方式

原生HTML项目

1. 解压dist-min目录到项目静态资源文件夹
2. 在HTML中引入：

<script id="editor" type="text/plain"></script>
<script src="/path/to/ueditor.config.js"></script>
<script src="/path/to/ueditor.all.js"></script>
<script>
  UE.getEditor('editor', {
    serverUrl: '/upload'  // 上传接口地址
  });
</script>

Vue项目安装

1. 安装依赖：

npm install vue-ueditor-wrap@2.x  # Vue2
npm install vue-ueditor-wrap@3.x  # Vue3

2. 配置组件：

<template>
  <vue-ueditor-wrap 
    v-model="content" 
    :config="{
      serverUrl: '/upload',
      UEDITOR_HOME_URL: '/static/UEditorPlus/'
    }"/>
</template>

5、项目处理脚本

开发环境构建

git clone https://gitee.com/modstart-lib/ueditor-plus.git
cd ueditor-plus
npm install
grunt default  # 生成压缩版到dist-min目录

上传处理脚本示例（PHP）

<?php
$action = $_GET['action'];
switch($action) {
    case 'uploadimage':
        $result = [
            "state" => "SUCCESS",
            "url" => "/upload/".$_FILES['upfile']['name']
        ];
        move_uploaded_file($_FILES['upfile']['tmp_name'], __DIR__.$result['url']);
        echo json_encode($result);
        break;
}
?>