TinyMCE 4.7.13本地图片上传后页面自动刷新问题（ASP MVC环境）

我之前碰到过一模一样的情况——图片能成功存到服务器，但页面莫名其妙刷新，折腾了好一会儿才找到根源。咱们从几个关键点入手排查解决：

1. 先确认返回的图片路径是Web可访问的URL，而非服务器物理路径 #

你当前的SaveFile方法如果返回的是Server.MapPath生成的本地磁盘路径（比如C:\xxx\Uploads\UsersContent\test.jpg），TinyMCE根本识别不了这个路径，会触发异常进而导致页面刷新。得把物理路径转换成网站能访问的相对URL：

修改你的控制器Action：

[HttpPost]
public ActionResult TinyMceUpload(HttpPostedFileBase file)
{
    string physicalDir = Server.MapPath("~/Uploads/UsersContent/");
    // 假设SaveFile返回保存后的文件名（比如"test.jpg"）
    string fileName = SaveFile(physicalDir, file);
    // 生成Web可访问的URL
    string imageUrl = Url.Content($"~/Uploads/UsersContent/{fileName}");
    return Json(new { location = imageUrl }, "application/json");
}

如果你的SaveFile返回的是完整物理路径，那就截取文件名部分再生成URL，比如：

string fullPhysicalPath = SaveFile(physicalDir, file);
string fileName = Path.GetFileName(fullPhysicalPath);
string imageUrl = Url.Content($"~/Uploads/UsersContent/{fileName}");

2. 明确指定JSON响应的ContentType #

ASP.NET MVC默认的JsonResult有时候会返回text/html类型的响应，TinyMCE预期的是application/json，不匹配的话也会导致异常刷新。所以在返回Json的时候明确指定ContentType：

return Json(new { location = imageUrl }, "application/json");

3. 阻止表单的默认提交行为 #

如果TinyMCE所在的表单没有阻止默认提交，上传操作可能会误触表单的submit事件。给表单加上阻止默认行为的逻辑：

方式1：直接在表单标签上添加 #

<form id="editorForm" onsubmit="return false;">
    <textarea class="formatedtext"></textarea>
    <!-- 其他表单元素 -->
</form>

方式2：用JS绑定事件（推荐） #

document.getElementById('editorForm').addEventListener('submit', function(e) {
    e.preventDefault();
});

如果用jQuery的话：

$('#editorForm').submit(function(e) {
    e.preventDefault();
});

额外检查点 #

• 确认你的SaveFile方法确实没有抛出异常，虽然图片能保存，但可以加个try-catch排查潜在错误：

[HttpPost]
public ActionResult TinyMceUpload(HttpPostedFileBase file)
{
    try
    {
        string physicalDir = Server.MapPath("~/Uploads/UsersContent/");
        string fileName = SaveFile(physicalDir, file);
        string imageUrl = Url.Content($"~/Uploads/UsersContent/{fileName}");
        return Json(new { location = imageUrl }, "application/json");
    }
    catch(Exception ex)
    {
        // 可以返回错误信息，方便调试
        return Json(new { error = ex.Message }, "application/json");
    }
}

按照这几步调整后，应该就能解决页面自动刷新的问题了。

内容的提问来源于stack exchange，提问作者user9428429