UEditor采坑指南

Posted 2021-10-20 D调码农的笔记簿

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文件夹中找到文件dialogs\\attachment\\attachment.js中找到代码

editor.execCommand(\'insertfile\', list);

在这行代码前添加

editor.fireEvent(\'afterUpfile\', list);

然后问题搞定

 

自编译 micropython ESP32固件指南以及16MB固件分享

自编译 micropython ESP32固件攻略以及16MB/8MB固件分享

---

本教程是连续奋斗了好几天才走向编译成功的。一路都是采坑过来的，为了后面学习者少走弯路少采坑的原则，这里将分享micropython固件编译避坑指南。内容将分几部分组成：环境搭建-工具链安装-编译过程

环境搭建

• Linux系统目前对于编译 micropython来说是必须的！这一句话，放在第一句，因为我在这个问题的认知上，折腾了一天。在编译 mpy-coress 时，构建MicroPython交叉编译器，交叉编译器的功能是对高级语言（比如：python、c语言…)翻译成低级语言（比如：汇编语言、机器语言…)的操作。
• Linux系统环境选择：在大部分人电脑上基本都是使用的Windows运行环境，在Windows环境下安装推荐ubuntu和msys2两个环境下实现MicroPython固件编译。
• msys2下编译尝试失败了，如果感兴趣的可以参考看：
• https://www.bilibili.com/video/BV1X3411i7D5?spm_id_from=333.337.search-card.all.click&vd_source=0c1548e2708eaca55c70ab0e53000c9c
• 个人推荐使用ubuntu不仅仅是因为我编译成功的原因，主要是相对于msys2好配置一些，遇到问题去网上检索找答案容易一些。说通俗一点就是，使用ubuntu的群体比较大。另外一个原因是我的电脑不满足运行虚拟机的条件，还在使用2010年的老电脑，估计好多人早就淘汰掉了12年前的电脑，升级win11都达不到配置要求。

Windows环境安装 ubuntu

• 在win10系统下，直接在Windows自带的应用商店下载ubuntu即可。
  
• 系统配置要求以及版本信息
  

安装上基本没什么坎。建议你的安装盘符一定要大一点，不然后面安装espidf和以及相关工具链时会占用很大空间。

必备软件以及编译工具链链安装

• Git：sudo apt-get install git
• python3.xx：终端中输入sudo apt install python3.9后按下Enter键来安装Python
• gcc：独立安装命令：sudo apt build-dep gcc，也可以通过资源库中，有一个名为 build-essential 的包，它包含 GCC 和其他各种编译器，如 g++ 和 make来安装：安装命令：

• sudo apt update
  
  sudo apt install build-essential

• cmake:apt-get install cmake
• 基于arm内核编译的工具链：sudo apt-get install gcc-arm-none-eabi

Git克隆

• esp-idf:通过Git命令克隆： git clone -b v4.4 --recursive https://github.com/espressif/esp-idf.git
• micropython源码克隆： git clone --recursive https://github.com/micropython/micropython.git

Git克隆下载资源说明

• 在通过Git命令克隆ESP32-IDF和Micropython资源之后，一定要使用git submodule update --init --recursive命令来检查是否将项目完整克隆下来，必须要在git clone ...git之后输入git submodule update --init --recursive按回车之后，没有任何提示符，直接是换行这种状态，才是真正的将项目以及项目中的子模块克隆下来了。(在国内这种环境下，100%是需要在提交克隆命令自后，再提交几次git submodule update --init --recursive按回车才可以将项目完整克隆下来，取决于网络环境)

个人ubuntu系统软件安装情况

||/ Name                            Version                                 Architecture Description
+++-===============================-=======================================-============-========================================>
ii  adduser                         3.118ubuntu5                            all          add and remove users and groups
ii  apparmor                        3.0.4-2ubuntu2.1                        amd64        user-space parser utility for AppArmor
ii  apport                          2.20.11-0ubuntu82.1                     all          automatically generate crash reports for>
ii  apport-symptoms                 0.24                                    all          symptom scripts for apport
ii  apt                             2.4.6                                   amd64        commandline package manager
ii  apt-utils                       2.4.6                                   amd64        package management related utility progr>
ii  base-files                      12ubuntu4.2                             amd64        Debian base system miscellaneous files
ii  base-passwd                     3.5.52build1                            amd64        Debian base system master password and g>
ii  bash                            5.1-6ubuntu1                            amd64        GNU Bourne Again SHell
ii  bash-completion                 1:2.11-5ubuntu1                         all          programmable completion for the bash she>
ii  bc                              1.07.1-3build1                          amd64        GNU bc arbitrary precision calculator la>
ii  bcache-tools                    1.0.8-4ubuntu3                          amd64        bcache userspace tools
ii  bind9-dnsutils                  1:9.18.1-1ubuntu1.1                     amd64        Clients provided with BIND 9
ii  bind9-host                      1:9.18.1-1ubuntu1.1                     amd64        DNS Lookup Utility
ii  bind9-libs:amd64                1:9.18.1-1ubuntu1.1                     amd64        Shared Libraries used by BIND 9
ii  binutils                        2.38-3ubuntu1                           amd64        GNU assembler, linker and binary utiliti>
ii  binutils-arm-none-eabi          2.38-3ubuntu1+15build1                  amd64        GNU assembler, linker and binary utiliti>
ii  binutils-common:amd64           2.38-3ubuntu1                           amd64        Common files for the GNU assembler, link>
ii  binutils-x86-64-linux-gnu       2.38-3ubuntu1                           amd64        GNU binary utilities, for x86-64-linux-g>
ii  bolt                            0.9.2-1                                 amd64        system daemon to manage thunderbolt 3 de>
ii  bsdextrautils                   2.37.2-4ubuntu3                         amd64        extra utilities from 4.4BSD-Lite
ii  bsdutils                        1:2.37.2-4ubuntu3                       amd64        basic utilities from 4.4BSD-Lite
ii  btrfs-progs                     5.16.2-1                                amd64        Checksumming Copy on Write Filesystem ut>
ii  build-essential                 12.9ubuntu3                             amd64        Informational list of build-essential pa>
ii  busybox-initramfs               1:1.30.1-7ubuntu3                       amd64        Standalone shell setup for initramfs
ii  busybox-static                  1:1.30.1-7ubuntu3                       amd64        Standalone rescue shell with tons of bui>
ii  byobu                           5.133-1                                 all          text window manager, shell multiplexer, >
ii  bzip2                           1.0.8-5build1                           amd64        high-quality block-sorting file compress>
ii  ca-certificates                 20211016                                all          Common CA certificates
ii  cloud-guest-utils               0.32-22-g45fe84a5-0ubuntu1              all          cloud guest utilities

micropython固件编译的安装

ESP-IDF 配置好编译环境

1. cd esp-idf
2. ./install.sh
3. source export.sh

编译 MicroPython

1. cd ../micropython/ports/esp32
2. make

固件封装

• ESP32 16MB固件,版本信息：MicroPython v1.19.1-339-g9a826e0f2-dirty on 2022-08-29; ESP32 module with ESP32
  

链接：https://pan.baidu.com/s/1dY_tTDVyDOWzGnD11e5clg 
提取码：wn4j

• 8MB的固件，固件版本信息：MicroPython v1.19.1-339-g9a826e0f2-dirty on 2022-08-30; ESP32 module with ESP32
  

链接：https://pan.baidu.com/s/1Z3wGAt2uWWn6os2AxrOSOQ 
提取码：qsnp

后续将根据情况提供其他型号的相关自定义的固件