百度编辑器UEditor使用教程以及Linux系统上传图片502报错的解决方法

最近写商城项目，对于商品的详情部分我选择使用百度编辑器 UEditor，这是由百度 WEB 前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点

先说一下报错 502 的解决办法吧，昨天真是写了一天的 Bug，改来改去的。下午将写好的程序交给公司产品助理进行测试商品上传，然后错误就来了

直接在群里发了一个上传失败请重试的截图，大写的尴尬哦 ?

没直接回复，以为是服务器的权限的问题，然后去改了一下权限，让重新上传一下，结果还是不行，跑过去看了一下，报错 502

这就开始接着找 Bug 了，看了一下发现是Uploader.class.php中的一段代码搞的鬼

$this->stateMap['ERROR_TYPE_NOT_ALLOWED'] = iconv('unicode', 'utf-8', $this->stateMap['ERROR_TYPE_NOT_ALLOWED']);

把上面这段代码注释掉就可以解决 502 问题

UEditor 报 502 错误也有很多种，这里提供一个我所遇到，仅供你参考 ?

下面来说一下百度编辑器 UEditor 一些简单的使用教程 ?

一、下载 UEditor 编辑器

百度编辑器官方提供了好几种语言的版本，如 PHP、JSP、ASP、.Net，这里直接下载 PHP 的 UTF-8 版。下载地址

二、精简 UEditor 编辑器

index.html是 UEditor 编辑器的示例 demo 文件，删除就可以

ueditor.all.min.js与ueditor.all.js内容相同，ueditor.all.min.js是ueditor.all.js的压缩版，使用时加载ueditor.all.min.js即可，所以editor.all.js也可以删除，ueditor.parse.js同样

三、部署 UEditor

把 UEditor 的所有文件放在项目的目录中，这里我用的 ThinkPHP5 框架，所以我把文件放在/public/static目录下

然后在网页中引入 UEditor 文件

<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/lang/zh-cn/zh-cn.js"></script>

这里建议手动加载语言，避免在 ie 下有时因为加载语言失败导致编辑器加载失败，这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文

官方推荐把textarea容器更换为script容器，所以我们使用这么搞

<script id="editor" name="detail" type="text/plain">//从数据库中取出的内容打印到此处</script>

初始化 UEditor 以后我们就能使用了

<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>

四、配置 UEditor 编辑器

配置的话这里就不多说了，使用默认就行，editor_config.js里还有很多常用的配置项目，比如编辑器初始内容、编辑器高度等等，需要配置时只需去掉该行代码前面的注释符号//即可

五、UEditor 代码高亮

UEditor 代码高亮使用了第三方的高亮 JS 组件 – SyntaxHighlighter，在测试的过程中问题不少，使用 UEditor 编辑器“插入代码”功能插入代码并提交到数据库后，在显示页面代码是不会高亮显示的，需要在该页面加载一下 JS 和 CSS 文件

<script type="text/javascript" src="__STATIC__/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="__STATIC__/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"/>
<script> SyntaxHighlighter.all() //执行代码高亮 </script>

还有一个问题，当再次使用 UEditor 编辑之前提交到数据库的代码时，编辑器会自动过滤掉代码中的很多标签，所以这里不管是接收数据还是重新展示数据都需要使用 PHP 函数进行转义，提交的时候用 PHP 的htmlspecialchars函数进行转义，输出页面的时候执行htmlspecialchars_decode函数后输出

沈唁志|一个PHPer的成长之路！ 原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：百度编辑器UEditor使用教程以及Linux系统上传图片502报错的解决方法