ueditor-list.zip

ueditor-list.zip是一个网页编辑器插件，它提供了丰富的富文本编辑功能，包括文字格式设置、图片上传、音视频插入、代码编辑和表格排版等。它非常易于安装和使用，可以与各种网站框架和CMS系统无缝集成。ueditor-list.zip是UEditor的一个版本，UEditor是一款由宇宙无敌大神bdmin开发的网页编辑器，目前在国内广泛应用于各种网站和应用程序的网页制作。UEDitor具有简单易用、兼容性好、多样化和可配置性高等特点，受到了广大开发者和用户的喜爱。使用ueditor-list.zip可以让您轻松地向网站中添加各种丰富的富文本内容，为用户提供更好的用户体验和更高的网站效果。如果您需要增加网页的编辑功能，ueditor-list.zip是您的最佳选择！

相关问题

ueditor 图片转存接口

UEditor提供的图片转存接口可以将富文本编辑器中的图片保存到服务器上，以便于后续的处理和展示。下面是一个简单的图片转存接口示例：

1. 在UEditor的config.json中添加图片上传配置：

{
    "imageActionName": "uploadimage",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048000,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "imageManagerActionName": "listimage",
    "imageManagerListPath": "/upload/image/",
    "imageManagerListSize": 20,
    "imageManagerUrlPrefix": "",
    "imageManagerInsertAlign": "none",
    "imageUrlPrefix": "",
    "imageInsertAlign": "none",
    "imageSavePath": "",
    "imageRemoteUrlPrefix": "",
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
    "catcherActionName": "catchimage",
    "catcherFieldName": "source",
    "catcherPathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "catcherUrlPrefix": "",
    "catcherMaxSize": 2048000,
    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "videoActionName": "uploadvideo",
    "videoFieldName": "upfile",
    "videoPathFormat": "/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
    "videoUrlPrefix": "",
    "videoMaxSize": 102400000,
    "videoAllowFiles": [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
    ],
    "fileActionName": "uploadfile",
    "fileFieldName": "upfile",
    "filePathFormat": "/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
    "fileUrlPrefix": "",
    "fileMaxSize": 51200000,
    "fileAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ],
    "imageManagerInsertAlign": "none",
    "snapscreenActionName": "uploadimage",
    "snapscreenPathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "snapscreenUrlPrefix": "",
    "snapscreenInsertAlign": "none",
    "snapscreenMaxSize": 2048000,
    "snapscreenAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "wordImageUrlPrefix": "",
    "wordImageActionName": "uploadwordimage",
    "wordImagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "wordImageFieldName": "upfile",
    "wordImageMaxSize": 2048000,
    "wordImageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
}

2. 在服务端添加图片转存接口：

<?php
// 定义图片本地保存路径
$savePath = __DIR__ . '/upload/image/';
// 获取图片二进制数据
$fileData = file_get_contents('php://input');
// 生成保存文件名
$fileName = date('YmdHis') . mt_rand(100000, 999999) . '.jpg';
// 保存图片到本地
file_put_contents($savePath . $fileName, $fileData);
// 返回保存后的图片地址
echo '/upload/image/' . $fileName;

3. 在UEditor的源码中实现图片转存：

在UEditor的源码中，可以找到`_saveRemote`方法，该方法用于保存富文本编辑器中的远程图片。可以在该方法中添加图片转存的相关代码，具体操作如下：

/**
 * 保存远程图片到本地
 * @param {String} imgUrl 远程图片地址
 * @return {Promise} 返回包含本地图片地址的Promise对象
 */
_saveRemote: function(imgUrl) {
  var me = this;
  return new Promise(function(resolve, reject) {
    // 定义图片转存接口地址
    var uploadUrl = me.getOpt('wordImageUrlPrefix') + me.getOpt('wordImageActionName');
    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    xhr.open("POST", uploadUrl, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // 将远程图片地址替换为本地图片地址
          var result = JSON.parse(xhr.responseText);
          if (result.state === "SUCCESS") {
            imgUrl = result.url;
            resolve(imgUrl);
          } else {
            reject(result.state);
          }
        } else {
          reject(xhr.statusText);
        }
      }
    };
    // 发送图片数据到服务端
    xhr.send('upfile=' + encodeURIComponent(imgUrl));
  });
},

在上述代码中，我们首先获取了图片转存接口的地址，并使用XMLHttpRequest对象将远程图片数据发送到该地址进行转存。转存成功后，我们将远程图片地址替换为本地图片地址，并将该地址通过Promise对象返回。

通过以上操作，我们就可以在UEditor中实现图片转存的功能了。

springboot+ueditor1.4.33实现附件上传功能至本地

实现Spring Boot和ueditor1.4.33的附件上传至本地的步骤如下：

1. 添加ueditor1.4.33的jar包依赖，在pom.xml中添加以下代码：

<dependency>
    <groupId>com.baidu.ueditor</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.4.3</version>
</dependency>

2. 配置ueditor，在resources目录下创建config.json文件，添加以下代码：

{
    "imageActionName": "uploadimage",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048000,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "imageCompressEnable": true,
    "imageCompressBorder": 1600,
    "imageInsertAlign": "none",
    "imageUrlPrefix": "",
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "scrawlActionName": "uploadscrawl",
    "scrawlFieldName": "upfile",
    "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "scrawlMaxSize": 2048000,
    "scrawlUrlPrefix": "",
    "scrawlInsertAlign": "none",
    "snapscreenActionName": "uploadimage",
    "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "snapscreenUrlPrefix": "",
    "snapscreenInsertAlign": "none",
    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
    "catcherActionName": "catchimage",
    "catcherFieldName": "source",
    "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "catcherUrlPrefix": "",
    "catcherMaxSize": 2048000,
    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "videoActionName": "uploadvideo",
    "videoFieldName": "upfile",
    "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
    "videoUrlPrefix": "",
    "videoMaxSize": 102400000,
    "videoAllowFiles": [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
    ],
    "fileActionName": "uploadfile",
    "fileFieldName": "upfile",
    "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
    "fileUrlPrefix": "",
    "fileMaxSize": 51200000,
    "fileAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ],
    "imageManagerActionName": "listimage",
    "imageManagerListPath": "/ueditor/jsp/upload/image/",
    "imageManagerListSize": 20,
    "imageManagerUrlPrefix": "",
    "imageManagerInsertAlign": "none",
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "fileManagerActionName": "listfile",
    "fileManagerListPath": "/ueditor/jsp/upload/file/",
    "fileManagerUrlPrefix": "",
    "fileManagerListSize": 20,
    "fileManagerAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ]
}

3. 在Controller中添加上传附件的方法，例如：

@Controller
@RequestMapping("/file")
public class FileController {

    @PostMapping("/upload")
    @ResponseBody
    public Map<String, Object> uploadFile(HttpServletRequest request, HttpServletResponse response) {
        // 获取配置文件路径
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        String configPath = rootPath + "config.json";

        // 创建配置对象
        ConfigManager configManager = ConfigManager.getInstance(rootPath, "http://localhost:8080/ueditor/jsp");
        try {
            // 初始化配置
            configManager.initEnv(configPath);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }

        // 创建上传对象
        UEditorUploader uploader = new BinaryUploader(configManager, request, response);
        // 执行上传
        Map<String, Object> result = uploader.doExec();
        return result;
    }
}

4. 在前端页面中使用ueditor上传附件，例如：

<!-- 加载ueditor -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>

<!-- 创建ueditor实例 -->
<script type="text/javascript">
    var ue = UE.getEditor('editor');
</script>

<!-- 创建上传按钮 -->
<div class="btn btn-primary" onclick="chooseFile()">上传文件</div>

<!-- 上传文件 -->
<script type="text/javascript">
    function chooseFile() {
        // 创建表单对象
        var formData = new FormData();
        // 获取文件对象
        var file = document.getElementById("file").files[0];
        // 添加文件到表单中
        formData.append("upfile", file);

        // 发送ajax请求
        $.ajax({
            url: "/file/upload",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (result) {
                if (result.state === "SUCCESS") {
                    // 上传成功，将附件地址添加到ueditor中
                    ue.execCommand('insertHtml', '<a href="' + result.url + '">' + result.title + '</a>');
                } else {
                    alert("上传失败");
                }
            }
        });
    }
</script>

以上就是实现Spring Boot和ueditor1.4.33的附件上传至本地的完整步骤。