UEditor Plus 技术文档

UEditor Plus 技术文档

【免费下载链接】ueditor-plus 基于 UEditor 二次开发的富文本编辑器，让UEditor重新焕发活力 项目地址: https://gitcode.com/modstart-lib/ueditor-plus

1. 安装指南

1.1 环境要求

• 支持现代浏览器（Chrome、Firefox、Edge等）
• 如需后端支持，需要PHP/Java/Node.js等服务器环境

1.2 获取方式

• 直接下载构建好的版本：
  • /dist/ 目录为非压缩版代码
  • /dist-min/ 目录为压缩版代码
• 或从Git仓库克隆：

  git clone https://gitee.com/modstart-lib/ueditor-plus.git
  

2. 项目使用说明

2.1 原生HTML使用

<script id="editor" type="text/plain" style="height:300px;"></script>
<script type="text/javascript" src="/path/to/UEditorPlus/ueditor.config.js"></script>
<script type="text/javascript" src="/path/to/UEditorPlus/ueditor.all.js"></script>
<script>
    var ue = UE.getEditor('editor', {
        // 配置项
    });
</script>

2.2 Vue2集成

1. 安装依赖：

npm install vue-ueditor-wrap@2.x

2. 复制dist-min到项目静态资源目录
3. 组件使用：

<template>
    <vue-ueditor-wrap v-model="content" 
                      editor-id="editor"
                      :config="editorConfig"
                      :editorDependencies="['ueditor.config.js','ueditor.all.js']"/>
</template>

2.3 Vue3集成

1. 安装依赖：

npm install vue-ueditor-wrap@3.x

2. 全局注册组件：

import {createApp} from 'vue'
import VueUeditorWrap from 'vue-ueditor-wrap';
createApp(App).use(VueUeditorWrap)

2.4 React集成

1. 安装依赖：

npm install react-ueditor-wrap

2. 组件使用：

<RcUeditor
    value={'<p>初始内容</p>'}
    ueditorUrl={'/static/UEditorPlus/ueditor.all.js'}
    editorConfig={{
        serverUrl: '/api/ueditor'
    }}
/>

3. API使用文档

3.1 核心API

• UE.getEditor(id, config)：初始化编辑器
• editor.setContent(content)：设置编辑器内容
• editor.getContent()：获取编辑器内容
• editor.execCommand(cmdName, value)：执行编辑器命令
• editor.destroy()：销毁编辑器实例

3.2 常用配置项

{
    // 后端API地址
    serverUrl: '/api/ueditor',
    // 编辑器资源路径
    UEDITOR_HOME_URL: '/static/UEditorPlus/',
    // 初始高度
    initialFrameHeight: 300,
    // 自动高度
    autoHeightEnabled: false,
    // 工具栏配置
    toolbars: [
        ['fullscreen', 'undo', 'redo', 'bold']
    ]
}

3.3 事件监听

editor.addListener('ready', function() {
    console.log('编辑器初始化完成');
});
editor.addListener('contentChange', function() {
    console.log('内容发生变化');
});

4. 项目安装方式

4.1 直接引入

1. 下载发布版本中的dist-min目录
2. 将文件部署到Web服务器
3. 按2.1章节方式引入使用

4.2 二次开发安装

1. 克隆仓库：

git clone https://gitee.com/modstart-lib/ueditor-plus.git

2. 安装依赖：

npm install

3. 开发调试：

grunt default

4. 访问_examples/index.html进行功能测试

4.3 后端配置

1. 根据文档配置上传接口
2. 设置跨域访问（如需要）
3. 配置黑白名单过滤规则

5. 注意事项

1. 多编辑器实例需确保每个实例有唯一ID
2. 上传功能需正确配置后端接口
3. 生产环境建议使用压缩版本(dist-min)
4. 内容安全过滤建议在后端实现二次校验

【免费下载链接】ueditor-plus 基于 UEditor 二次开发的富文本编辑器，让UEditor重新焕发活力 项目地址: https://gitcode.com/modstart-lib/ueditor-plus