博客 (10)

HTML：

<script id="tb_content" type="text/plain">{{content}}</script>

JS：

var app = new Vue({
    el: "#app",
    data: {
        content: 'abc',
        ue: {},
    }, mounted: function () {
        this.ue = UE.getEditor('tb_content');
    }, methods: {
        fn_save: function () {
            console.log(this.ue.getContent())
        }
    }
});

通过 nuget 安装 UEditorNetCore

从 UEditor 官网 下载最新的包 ueditorx_x_x_x-utf8-net.zip

解压包，并复制到项目的 wwwroot/lib 目录下，删除 net 目录。

根据 UEditorNetCore 官方的使用说明进行操作

步骤中，控制器 UEditorController 接替原 controller.ashx 的功能，用于统一处理上传逻辑

原 config.json 复制到项目根目录，用于配置上传相关设置（若更改文件名和路径在 services.AddUEditorService() 中处理）。

个人喜欢将 xxxPathFormat 值改为：upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}，方便日后迁移附件后进行批量替换。

记得配置 catcherLocalDomain 项。

上传相关的身份验证和授权控制请在 UEditorController 中处理，如：

public void Do()
{
    if (用户未登录) { throw new System.Exception("请登录后再试"); }
    _ue.DoAction(HttpContext);
}

如果图片仅仅上传到网站目录下，那么这样配置就结束了，如果要上传到阿里云 OSS 等第三方图床，那么继续往下看。

因 UEditorNetCore 虽然实现了上传到 FTP 和 OSS 的功能，但未提供配置相关的账号信息的途径，所以只能（1）重写 action，或（2）下载 github 的源代码，将核心项目加入到您的项目中进行修改。

重写 action 不方便后期维护，这里记录修改源码的方式。

将源码改造为可配置账号的上传到 OSS 的功能，具体步骤如下：

1. 将 Consts.cs 从项目中排除。

2. 打开 Handlers/UploadHandler.cs，找到 UploadConfig 类，将

   FtpUpload 改为 OssUpload，

   FtpAccount 改为 OssAccessKeyId，

   FtpPwd 改为 OssAccessKeySecret，

   FtpIp 改为 OssAccessEndpoint，

   再添加一个属性 OssBucketName。

3. 打开 Handlers/UploadHandler.cs，找到 Process() 方法， 

   将 UploadConfig.FtpUpload 改为 UploadConfig.OssUpload，

   将 Consts.AliyunOssServer.* 改为 UploadConfig.Oss*。

4. 打开 Handlers/CrawlerHandler.cs，找到 Fetch() 方法，

   将 Config.GetValue<bool>("catcherFtpUpload") 改为 Config.GetValue<bool>("OssUpload")，

   将 Consts.AliyunOssServer.* 改为 Config.GetString("Oss*")。

5. 打开 UEditorActionCollection.cs，找到 UploadImageAction，将

   FtpUpload = Config.GetValue<bool>("imageFtpUpload"),
   FtpAccount = Consts.ImgFtpServer.account,
   FtpPwd = Consts.ImgFtpServer.pwd,
   FtpIp = Consts.ImgFtpServer.ip,

   替换为

   OssUpload = Config.GetValue<bool>("OssUpload"),
   OssAccessKeyId = Config.GetString("OssAccessKeyId"),
   OssAccessKeySecret = Config.GetString("OssAccessKeySecret"),
   OssAccessEndpoint = Config.GetString("OssAccessEndpoint"),
   OssBucketName = Config.GetString("OssBucketName"),

   其余 3 个 Action（UploadScrawlAction、UploadVideoAction、UploadFileAction）按同样的方式修改。

   在所有创建 UploadHandler 对象时补充添加 SaveAbsolutePath 属性。

6. 打开 config.json，添加相关配置项（注：配置文件中的 *FtpUpload 全部废弃，统一由 OssUpload 决定）

   "OssUpload": true,
   "OssAccessEndpoint": "",
   "OssAccessKeyId": "",
   "OssAccessKeySecret": "",
   "OssBucketName": "",

   将 xxxUrlPrefix 的值改为 OSS 对应的 CDN 网址（以 / 结尾，如：//cdn.xoyozo.net/）。

其它注意点：

• 若使用 UEditorNetCore github 提供的源代码类库代替 nuget，且使用本地存储，那么需要将 Handlers 目录中与定义 savePath 相关的代码（查找  var savePath）替换成被注释的行
  

这个现象在国产浏览器上使用极速内核时出现，原因是百度编辑器上传图片功能通过 <form /> 提交到 <iframe /> 时，因跨域导致 cookie 丢失。

ASP.NET 的 ASP.NET_SessionId 默认的 SameSite 属性值为 Lax，将其设置为 None 即可：

protected void Session_Start(object sender, EventArgs e)
{
    // 解决在部分国产浏览器上使用百度编辑器上传图片时（iframe），未通过 cookie 传递 ASP.NET_SessionId 的问题
    string ua = Request.UserAgent ?? "";
    var browsers = new string[] { "QQBrowser/" /*, "Chrome/" 不要直接设置 Chrome，真正的 Chrome 会出现正常页面不传递 Cookie 的情况 */ };
    bool inWeixin = ua.Contains("MicroMessenger/"); // 是否在微信中打开（因微信PC端使用QQ浏览器内核，下面的设置会导致其网页授权失败）
    if (browsers.Any(c => ua.Contains(c)) && !inWeixin)
    {
        Response.Cookies["ASP.NET_SessionId"].SameSite = SameSiteMode.None;
    }
}

以上代码加入到 Global.asax 的 Session_Start 方法中，或百度编辑器所在页面。

注意一：SameSite=None 时会将父页面的 cookie 带入到 iframe 子页的请求中，从而导致 cookie 泄露，请确保项目中无任何站外引用，如网站浏量统计器、JS组件远程CDN等！

注意二：微信PC版的内嵌浏览器使用QQ浏览器内核，以上代码会导致其微信网页授权不能正常执行。

找到 ueditor.config.js 文件，将

hr:     [],

替换为：

hr:     ['class', 'style', 'noshade', 'size'],

ueditor.all.min.js: Uncaught DOMException: Blocked a frame with origin "http://localhost:4492" from accessing a cross-origin frame.

    at baidu.editor.ui.Dialog.close

当引用第三方 CDN 静态资源的方式部署百度编辑器时，使用多图上传、涂鸦等功能（弹出框使用 iframe 标签引用 CDN 上的网页）会报上述跨域错误。

官方并没有给出这种部署方案（即客户端页面与页面之间的 iframe 跨域）的完美跨域方法。

但官方针对服务端和客户端分离的跨域情形进行了说明：

http://fex.baidu.com/ueditor/#dev-crossdomain

之前已经介绍了百度编辑器在 ASP.NET 环境下的配置，本文继续补充改进其将图片等附件上传到阿里云 OSS。

首先从阿里云控制台下载相关 SDK，并阅读相关的 API 文档。链接：https://promotion.aliyun.com/ntms/act/ossdoclist.html

改造上传代码

打开文件 UploadHandler.cs，在 Process() 方法中找到：

File.WriteAllBytes(localPath, uploadFileBytes);

在其下方插入代码：

client.PutObject(bucketName, "upload/ueditor/" + savePath, localPath);

实现图标按钮上传和 HTML5 拖放上传。

PutObject() 的第 2 个参数是 OSS 中的图片路径，第 3 个参数是图片在网站目录下的磁盘路径。

打开文件 CrawlerHandler.cs，在 Fetch() 方法中找到：

File.WriteAllBytes(savePath, bytes);

在其下方插入代码：

client.PutObject(bucketName, "upload/ueditor/" + ServerUrl, savePath);

实现粘贴板图片上传。

同样注意两个参数变量。

修改路径前缀

上传成功后，编辑器会拼装路径到 HTML 代码中，这个前缀是在 config.json 文件中配置的，具体找到以 UrlPrefix 结尾的属性，如 imageUrlPrefix，进行相应的修改即可：

"imageUrlPrefix": "//oss.xoyozo.net/upload/ueditor/", /* 图片访问路径前缀 */

路径以“//”开头能更好地兼容 https。

上表中的部分功能可能需要通过配置或安装插件来实现。
本文编辑时间为2012年10月7日，文中若有错误或编辑器的新版本支持了上述功能，请通过QQ940534113告诉我。
非常感谢您的支持！

UEditor 的 ASP 版本在虚拟空间上传文件失败，提示“上传错误”或“上传失败，请重试”等，是因为其文件上传组件在创建目录时，没有网站目录外的访问权限。

例如上传文件的磁盘保存路径为：

D:\web\sitename\wwwroot\upload\20180523\123.jpg

百度编辑器的上传组件会依次判断以下目录是否存在，不存在则创建：

D:\

D:\web\

D:\web\sitename\

D:\web\sitename\wwwroot\

D:\web\sitename\wwwroot\upload\

D:\web\sitename\wwwroot\upload\20180523\

虚拟空间自动配置的网站根目录可能是：

D:\web\sitename\wwwroot\

所以，判断存在或创建以下目录没有问题：

D:\web\sitename\wwwroot\upload\

D:\web\sitename\wwwroot\upload\20180523\

但判断存在以下目录时会因为权限不足而失败：

D:\

D:\web\

D:\web\sitename\

解决方法是找到文件 asp/Uploader.Class.asp

找到 CheckOrCreatePath 这个 Function，替换为：

Private Function CheckOrCreatePath( ByVal path )    
   Set fs = Server.CreateObject("Scripting.FileSystemObject")    
   Dim parts    
   Dim root : root = Server.mappath("/") & "\"    
   parts = Split( Replace(path, root, ""), "\" )    
   path = root    
   For Each part in parts    
       path = path + part + "\"    
       If fs.FolderExists( path ) = False Then    
           fs.CreateFolder( path )    
       End If    
   Next    
End Function

另外，如果服务端无法通过 Request.Form 来接收该值，把 <form /> 放到 <table /> 外面试试。

或者绑定 contentChange 事件来赋值（不推荐）：

ue.addListener("contentChange", function() {
    document.getElementsByName('xxxxxx')[0].value = ue.getContent();
});

此方法的缺点是，不是所有操作都能触发 contentChange 事件，比如剪切、上传图片等。

改进方法（推荐）：在 form 提交之前赋值。

收录了一些个人觉得不错的网页开发插件。

由于插件更新频繁，本页如有错误请指正，也欢迎告知更多功能强大、使用方便的插件。

在 ASP.NET Core 或 ASP.NET 5 中部署百度编辑器请跳转此文。

本文记录百度编辑器 ASP.NET 版的部署过程，对其它语言版本也有一定的参考价值。

【2020.02.21 重新整理】

下载

从 GitHub 下载最新发布版本：https://github.com/fex-team/ueditor/releases

按编码分有 gbk 和 utf8 两种版本，按服务端编程语言分有 asp、jsp、net、php 四种版本，按需下载。

目录介绍

以 v1.4.3.3 utf8-net 为例，

客户端部署

本例将上述所有目录和文件拷贝到网站目录 /libs/ueditor/ 下。

当然也可以引用 CDN 静态资源，但会遇到诸多跨域问题，不建议。

在内容编辑页面引入：

<script src="/libs/ueditor/ueditor.config.js"></script>
<script src="/libs/ueditor/ueditor.all.min.js"></script>

在内容显示页面引入：

<script src="/libs/ueditor/ueditor.parse.min.js"></script>

如需修改编辑器资源文件根路径，参 ueditor.config.js 文件内顶部文件。（一般不需要单独设置）

如果使用 CDN，那么在初始化 UE 实例的时候应配置 serverUrl 值（即 controller.ashx 所在路径）。

客户端配置

初始化 UE 实例：

var ue = UE.getEditor('tb_content', {
    // serverUrl: '/libs/ueditor/net/controller.ashx', // 指定服务端接收文件路径
    initialFrameWidth: '100%'
});

其它参数见官方文档，或 ueditor.config.js 文件。

服务端部署

net 目录是 ASP.NET 版的服务端程序，用来实现接收上传的文件等功能。

本例中在网站中的位置是 /libs/ueditor/net/。如果改动了位置，那么在初始化 UE 的时候也应该配置 serverUrl 值。

这是一个完整的 VS 项目，可以单独部署为一个网站。其中：

net/config.json  服务端配置文件
net/controller.ashx  文件上传入口
net/App_Code/CrawlerHandler.cs  远程抓图动作
net/App_Code/ListFileManager.cs  文件管理动作
net/App_Code/UploadHandler.cs  上传动作

该目录不需要转换为应用程序。

服务端配置

根据 config.json 中 *PathFormat 的默认配置，一般地，上传的图片会保存在 controller.ashx 文件所在目录（即本例中的 /libs/ueditor/）的 upload 目录中：
/libs/ueditor/upload/image/
原因是 UploadHandler.cs 中 Server.MapPath 的参数是由 *PathFormat 决定的。

以修改 config.json 中的 imagePathFormat 为例：

原值："imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"

改为："imagePathFormat": "/upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}"

以“/”开始的路径在 Server.MapPath 时会定位到网站根目录。

此处不能以“~/”开始，因为最终在客户端显示的图片路径是 imageUrlPrefix + imagePathFormat，若其中包含符号“~”就无法正确显示。

在该配置文件中查找所有 PathFormat，按相同的规则修改。

说到客户端的图片路径，我们只要将

原值："imageUrlPrefix": "/ueditor/net/"

改为："imageUrlPrefix": ""

即可返回客户端正确的 URL。

当然也要同步修改 scrawlUrlPrefix、snapscreenUrlPrefix、catcherUrlPrefix、videoUrlPrefix、fileUrlPrefix。

特殊情况，在复制包含图片的网页内容的操作中，若图片地址带“?”等符号，会出现无法保存到磁盘的情况，需要修改以下代码：

打开  CrawlerHandler.cs 文件，找到

ServerUrl = PathFormatter.Format(Path.GetFileName(this.SourceUrl), Config.GetString("catcherPathFormat"));

替换成：

ServerUrl = PathFormatter.Format(Path.GetFileName(SourceUrl.Contains("?") ? SourceUrl.Substring(0, SourceUrl.IndexOf("?")) : SourceUrl), Config.GetString("catcherPathFormat"));

如果你将图片保存到第三方图库，那么 imageUrlPrefix 值设为相应的域名即可，如：

改为："imageUrlPrefix": "//cdn.***.com"

然后在 UploadHandler.cs 文件（用于文件上传）中找到

File.WriteAllBytes(localPath, uploadFileBytes);

在其下方插入上传到第三方图库的代码，以阿里云 OSS 为例：

// 上传到 OSS
client.PutObject(bucketName, savePath.Substring(1), localPath);

在 CrawlerHandler.cs 文件（无程抓图上传）中找到

File.WriteAllBytes(savePath, bytes);

在其下方插入上传到第三方图库的代码，以阿里云 OSS 为例：

// 上传到 OSS
client.PutObject(bucketName, ServerUrl.Substring(1), savePath);

最后有还有两个以 UrlPrefix 结尾的参数名 imageManagerUrlPrefix 和 fileManagerUrlPrefix 分别是用来列出上传目录中的图片和文件的，

对应的操作是在编辑器上的“多图上传”功能的“在线管理”，和“附件”功能的“在线附件”。

最终列出的图片路径是由 imageManagerUrlPrefix + imageManagerListPath + 图片 URL 组成的，那么：

"imageManagerListPath": "/upload/ueditor/image",

"imageManagerUrlPrefix": "",

以及：

"fileManagerListPath": "/upload/ueditor/file",

"fileManagerUrlPrefix": "",

即可。

如果是上传到第三方图库的，且图库上的文件与本地副本是一致的，那么将 imageManagerUrlPrefix 和 fileManagerUrlPrefix 设置为图库域名，

服务端仍然以 imageManagerListPath 指定的路径来查找本地文件（非图库），但客户端显示图库的文件 URL。

因此，如果文件仅存放在图库上，本地没有副本的情况就无法使用该功能了。

综上，所有的 *UrlPrefix 应该设为一致。

另外记得配置不希望被远程抓图的域名，参数 catcherLocalDomain。

服务端授权

现在来判断一下只有登录用户才允许上传。

首先打开服务端的统一入口文件 controller.ashx，

继承类“IHttpHandler”改为“IHttpHandler, System.Web.SessionState.IRequiresSessionState”，即同时继承两个类，以便可使用 Session，
找到“switch”，其上插入：

if (用户未登录) { throw new System.Exception("请登录后再试"); }

即用户已登录或 action 为获取 config 才进入 switch。然后，

else
{
    action = new NotAllowedHandler(context);
}

这里的 NotAllowedHandler 是参照 NotSupportedHandler 创建的，提示语 state 可以是“登录后才能进行此操作。”

上传目录权限设置

上传目录（即本例中的 /upload/ueditor/ 目录）应设置允许写入和禁止执行。

基本用法

设置内容：

ue.setContent("Hello world.");

获取内容：

var a = ue.getContent();

更多用法见官方文档：http://fex.baidu.com/ueditor/#api-common

其它事宜

配置上传附件的文件格式

找到文件：config.json，更改“上传文件配置”的 fileAllowFiles 项，

同时在 Web 服务器上允许这些格式的文件可访问权限。以 IIS 为例，在“MIME 类型”模块中添加扩展名。

遇到从客户端(......)中检测到有潜在危险的 Request.Form 值。请参考此文

另外，对于不支持上传 .webp 类型的图片的问题，可以作以下修改：
config.json 中搜索“".bmp"”，替换为“".bmp", ".webp"”
IIS 中选中对应网站或直接选中服务器名，打开“MIME 类型”，添加，文件扩展名为“.webp”，MIME 类型为“image/webp”

最后，为了在内容展示页面看到跟编辑器中相同的效果，请参照官方文档引用 uParse

若有插入代码，再引用：
<link href="/lib/ueditor/utf8-net/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" />
<script src="/lib/ueditor/utf8-net/third-party/SyntaxHighlighter/shCore.js"></script>

其它插件雷同。

若对编辑器的尺寸有要求，在初始化时设置即可：

var ue = UE.getEditor('tb_content', {

  initialFrameWidth: '100%',
  initialFrameHeight: 320
});

图片等附件上传到阿里云 OSS 参考此文