最近写商城项目,对于商品的详情部分我选择使用百度编辑器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
函数后输出
你也用上百度UEditor了。 🙂
@西枫里博客 哈哈 没办法