ueditor使用(一)：跨域上传文件+单图上传回显

最新推荐文章于 2024-07-26 15:01:02 发布

Yonfly

最新推荐文章于 2024-07-26 15:01:02 发布

阅读量699

点赞数

分类专栏： HTML5+API 文章标签：编辑器

本文链接：https://blog.csdn.net/m0_37894611/article/details/109687558

版权

HTML5+API 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

事先准备两个文件夹，用于发布到本地服务器测试，端口号我分别使用了 8011 和 8022，下面也用8011、8022代表这两个文件夹

官网下载解压后目录如下

我们将解压的目录发布到本地服务器（http://192.168.2.57:8011）也就是复制粘贴到 8011 文件夹
根目录新建文件夹 view 用于存放新建的页面

新建页面 test.html,引入代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

    </head>
    <body>
        <!-- 加载编辑器的容器 -->
        <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
        <!-- 配置文件 -->
        <script src="../ueditor.config.js" type="text/javascript" charset="utf-8"></script>
        <!--
            编辑器源码文件
            官方教程中的  解压后并未找到 ueditor.all.js 
            可以引用 _examples 中的 editor_api.js 代替
        -->
        <script src="../_examples/editor_api.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // 页面初始化编辑器,参数配置见 ueditor.config.js 自带注释
            var ue = UE.getEditor('container', {
                initialFrameHeight: 380, //初始化编辑器高度
                toolbars: [
                    [
                        'source', //源代码
                        'simpleupload', //单图上传
                        'insertimage', //多图上传
                        'insertvideo', //视频
                    ]
                ]
            });
        </script>
    </body>
</html>

浏览器运行如下图，初始化成功，但会提示 后台配置项返回格式出错，上传功能将不能正常使用！

这里我们打开8011根目录 ueditor.config.js ，找到 serverUrl 我们以 asp 为例

serverUrl: URL + "asp/controller.asp" 即可正常使用，点击单图上传，上传成功，单浏览器出现404，并未显示图片

点击单图上传发现图片上传成功，但是客户端回执了一个错误的路径

我们只需要到8011目录下找到 config.json

由回执路径可知 url= http://192.168.2.57:8011 + imageUrlPrefix + imagePathFormat，所以

根据我的路径得出我需要改成 "imageUrlPrefix":"/asp/" 就行, 测试成功

如果你的项目对文件目录没有什么要求，那么上面的设置已经够用了

下面就说说跨域上传的方法，选择一项你想用的服务器文件

我发布了net版本（http//:192.168.2.57:8022）也就是将 net文件夹中的文件复制粘贴到 8022 ，并发布了IIS

找到8022 的服务配置 config.json ，将图片访问前缀改成你发布的路径

找到8011 的 ueditor.config.js,将服务器统一接口路径改成你发布的服务路径，如下图

注意js缓存可能导致 serverUrl出错，

net 处理文件上传失败（跨域问题）https://blog.csdn.net/m0_37894611/article/details/104967370

到这里，文件上传成功，但是回显失败（官方文档有说明：单文件上传是form提交到iframe，然后检测iframe里面的内容来返回结果，官方已经明确说明了单文件上传不能实现跨域上传，就是因为跨域的iframe是获取不到iframe里面的html代码的，所以现在不能获得上传地址）。

关于单图上传回显的解决方法：转至 https://www.cnblogs.com/hpnet/p/6290452.html 再此记录一下

好了，实现单文件跨域上传。首先要搞懂它的原理，它是提交到iframe去上传，然后监控iframe加载完成后js获取iframe里面的内容也就是json结果来得到图片上传结果。而跨域上传iframe里面的页面和当前页面不是同一个域名就获取不到json了，官方说暂时不支持，其实so easy，用传统的代理页面来解决，就是文件服务器上传成功后，不直接显示结果，而是跳转到 8011 下面来的result.ashx页面来，把结果传递到这个页面上，再输出来，这样iframe就在同一个域名上了，js就能直接获取iframe里面的内容了。

首先在 8011下面添加result.ashx：

<%@ WebHandler Language="C#" Class="UEditorHandler" %>

using System;
using System.Web;
using System.IO;
using System.Collections;

public class UEditorHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var result=context.Request["result"];
        //当然这里最好判断一下result是否安全，不要接收到内容就显示这样会被人利用。
        if(result!=null)
            context.Response.Write(result.ToString());
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

因为只有单图上传（也就是简单文件上传）要用iframe方式，所以我们要判断一下，只有简单文件上传才用这种方式。打开ueditor.all.js或者ueditor.all.min.js你页面上调用哪个就打开哪个，搜索<input id="edui_input_ 在</form>之前加上：
<input type="hidden" name="issimpleupload" value="true" /> 这样上传后我们好通过获取issimpleupload来判断是不是简单文件上传。

如果没有ueditor.all.js文件的，请到 _src/plugins/simpleupload.js 搜索添加

然后改 8022 的处理文件：app_code里面的Handler.cs打开，第28行的大括号里面加上判断：

if (String.IsNullOrWhiteSpace(jsonpCallback))
        {
            var issimple = Request["IsSimpleUpload"];
            if (issimple != null && issimple.ToString()=="true")
            {
                Response.Redirect("http://192.168.2.57：8011/result.ashx?result=" + json); //把json传递到8011下面去呈现结果。
            }
            Response.AddHeader("Content-Type", "text/plain");
            Response.Write(json);
        }

到此跨域上传图片功能完美实现

Yonfly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ueditor使用(一)：跨域上传文件+单图上传回显

事先准备两个文件夹，用于发布到本地服务器测试，端口号我分别使用了 8011 和 8022，下面也用8011、8022代表这两个文件夹官网下载解压后目录如下我们将解压的目录发布到本地服务器（http://192.168.2.57:8011）也就是复制粘贴到 8011 文件夹根目录新建文件夹 view 用于存放新建的页面新建页面 test.html,引入代码<!DOCTYPE html><html> <head> ...
复制链接

扫一扫

专栏目录