欢迎光临
我的个人博客网站

UEditor采坑指南

1.版本选择

GitHub上的最新版(1.5)没有提供后端代码。想要后端代码可以下载历史版本(1.4.3.3)。

1.5版本:https://github.com/fex-team/ueditor

1.4.3.3版本:https://github.com/fex-team/ueditor/releases/tag/v1.4.3.3

2.部署

(原文:https://xoyozo.net/Blog/Details/how-to-config-ueditor-with-asp-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/image/{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 });

 

3.解决无法插入动态地图

(原文:https://www.cnblogs.com/CcPz/p/10012122.html)

(1)打开编辑器根目录下面的ueditor.all.js文件,找到:

table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled")

在这句代码下面加一行:

table.setAttribute("style", "border-collapse:collapse;");

(2)在ueditor.all.js文件中找到:

return '<table><tbody>' + html.join('') + '</tbody></table>'

改为:

return '<table style="border-collapse:collapse;"><tbody>' + html.join('') + '</tbody></table>'

(3)修改配置文件ueditor.config.js 找到:

whitList

下一行添加:

iframe: ['frameborder','border','marginwidth','marginheight','width','height','src','id'],//动态地图

 

4.解决单独调用上传图片失效问题

(原文:https://www.cnblogs.com/pcx105/p/7717028.html)

第一步, 引入文件

<script src="jquery.min.js" type="text/javascript" ></script> <script src="ueditor/ueditor.config.js" type="text/javascript" ></script> <script src="ueditor/ueditor.all.min.js" type="text/javascript" ></script>

第二步 html元素

<script type="text/plain" id="upload_ue"></script>

调用的页面:

<input type="text" id="picture" name="cover" /><a href="javascript:void(0);" onclick="upImage();">上传图片</a> <input type="text" id="file" /><a href="javascript:void(0);" onclick="upFiles();">上传文件</a>

第三步 编写js代码

<script type="text/javascript"> var _editor; $(function() {  //重新实例化一个编辑器,防止在上面的editor编辑器中显示上传的图片或者文件 _editor = UE.getEditor('upload_ue'); _editor.ready(function () { //设置编辑器不可用 _editor.setDisabled(); //隐藏编辑器,因为不会用到这个编辑器实例,所以要隐藏 _editor.hide(); //侦听图片上传 _editor.addListener('beforeInsertImage', function (t, arg) { //将地址赋值给相应的input,只去第一张图片的路径 $("#picture").attr("value", arg[0].src); //图片预览 $("#preview").attr("src", arg[0].src); }) //侦听文件上传,取上传文件列表中第一个上传的文件的路径 _editor.addListener('afterUpfile', function (t, arg) { $("#file").attr("value", _editor.options.filePath + arg[0].url); }) }); });  //弹出图片上传的对话框 function upImage() { var myImage = _editor.getDialog("insertimage"); myImage.open(); } //弹出文件上传的对话框 function upFiles() { var myFiles = _editor.getDialog("attachment"); myFiles.open(); } </script>

第四步 最重要的一步, 修改bug

打开image插件的image.js 108行

editor.execCommand('insertimage', list);

代码之前加入

editor.fireEvent('beforeinsertimage', list);

然后问题搞定

第五步,如果第四步不行,请参考这一步

在ueditor文件夹中找到文件dialogsattachmentattachment.js中找到代码

editor.execCommand('insertfile', list);

在这行代码前添加

editor.fireEvent('afterUpfile', list);

然后问题搞定

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » UEditor采坑指南
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏