博客 (24)

在 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 参考此文

过程很简单，就是手机通过安装了 Fiddler 的电脑代理上网就可以抓包了，具体设置：

打开 Fiddler Web Debugger 菜单栏上的 Tools -Fiddler Options...

切换到 Connections 选项卡

勾选 Allow remote computers to connect 并记住上面的端口号 Fiddler listens on port，默认 8888，OK，关闭并重新开启 Fiddler

在手机上修改已连接的网络配置，手动设置代理为电脑上网的本地 IP，端口号就是上一步的 Fiddler listens on port，好了，手机上的网络请求都可以在 Fiddler 上捕获到了。

简单安装过程：请各位注意安装顺序

----------------------------------------------------
（一）Apache：
    装在默认目录。安装-自定义-全部选中。
----------------------------------------------------
（二）PHP：
第一步：压缩C:\php5目录下。
第二步：（将PHP目录添加到PATH环境变量中）开始 -> 控制面板 -> 系统 -> 高级 -> 环境变量 -> 系统变量 -> Path -> 双击 -> 加入“;C:\php5”
第三步：将C:\php5\php.ini-recommended 重命名为 php.ini 。
用记事本打开 php.ini ，查找register_globals = Off，把off改成On （有二处）
查找short_open_tag = Off，把off改成On 有一处
查找extension_dir = "./" 改为 extension_dir = "C:\php5\ext"
查找;extension=php_mbstring.dll，把下面几句前面的分号去掉
extension=php_mbstring.dll
extension=php_dba.dll
extension=php_dbase.dll
extension=php_filepro.dll
extension=php_gd2.dll
extension=php_imap.dll
extension=php_ldap.dll
extension=php_mysql.dll
修改了一些文件上传以及内存使用最大限制：
memory_limit = 20M   　　　　内存容量
post_max_size = 20M   　　　闪存容量
upload_max_filesize = 20M   　附件容量
保存退出。
第四步：（使php.ini文件在Windows下被PHP所用）
开始 -> 控制面板 -> 系统 -> 高级 -> 环境变量 -> 系统变量 -> 新建 -> 输入“PHPRC” -> 在“变量值”中输入 php.ini文件所在的目录（例如：C:\php5）
点击“确定”

Microsoft Windows 下的 Apache 2.0.x
　　先停止Apache
　　用记事本打开C:\Apache2\conf(可能在C:\Program Files\Apache Group\Apache2\conf)下的httpd.conf
　　这个文件我改了几个地方：
　　把PHP直接作为apache的一个模块运行，我在里面加了两句：

查找到 #LoadModule ssl_module modules/mod_ssl.so 在它的下面一行加上
  
LoadModule php5_module "C:/PHP5/php5apache2.dll"
AddType application/x-httpd-php .php   注意点前面有个空格滴，大家最好用复制粘贴
(新版apache2.2的php5apache2_2.dll在外面，放上去同理用)

我在D盘下建立了一个www的目录用于存放我的站点文件，在http.conf里改了这样一句话：
把
DocumentRoot "C:/Program Files/Apache Group/Apache2/htdocs"
改成了
DocumentRoot "D:/www"
所有

Apache2.0.x于1.3.x相比2.0.x默认不能直接列目录，如需，就改：
把DocumentRoot "E:/www"这句下的如下语句

<Directory />
    Options FollowSymLinks
    AllowOverride None
</Directory>
改为：
<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory> 

修改目录的默认首页：
如：DirectoryIndex index.htm index.html index.php index.html index.html.var
别的就没再动什么地方，保存后退出。

注意一点的是，要使以上所有这些配置生效需要重新启动电脑

最后我们来测试PHP是否正常载入。打开记事本，输入
<?php
phpinfo();
?>

保存，在弹出的窗口中，文件类型选所有文件，文件名为phpinfo.php，保存位置为网站目录下。如（E:\www\phpinfo.php）
打开IE浏览器输入：http://localhost/phpinfo.php　如果能正常显示就OK了。

-------------------------------------------------------
（三）Zend：
　　先停止Apache
　　安装Zend Optimizer也很简单，安装中它会两处提示其一：选择那种服务器？请选择Apache。其二：PHP.ini的路径？请选择C:\PHP5。其它的按默认配置安装就行了。OK安装完后我的Zend目录就是C:\Zend。

-------------------------------------------------------
（四）Mysql：