网学网为需要网络知识的朋友们搜集整理了百度编辑器UEditor 简单使用教程分享相关资料，希望对各位网友有所帮助!
UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议，所有源代码在协议允许范围内可自由修改和使用。最近在开发程序的时候需要集成一个富文本编辑器，UEditor的UI及UE比CKEditor、KindEditor要好出不少。所以简单地对UEditor研究了一下，记录于此。
一、下载UEditor编辑器
可以在chinaz源码下载最新版本的百度编辑器：
百度编辑器UEditor PHP版 http://down.chinaz.com/soft/30289.htm
百度编辑器UEditor .NET版 http://down.chinaz.com/soft/32520.htm
百度编辑器UEditor JSP版 http://down.chinaz.com/soft/32521.htm
也可在UEditor官方网站：http://ueditor.baidu.com/下载频道下载到最新版本的UEditor
UEditor官方的下载方式分为两种,完整下载与定制下载，完整下载提供UTF-8与GBK两种编码的版本，定制下载目前只有UTF-8编码，推荐使用定制下载，按需求定制，如果程序不是UTF-8编码，可以使用EditPlus等工具将压缩包里所有的HTML及JS文件转码，记得同时修改HTML文件中的charset=utf-8。
二、精简UEditor编辑器
完整版的相关文档与示例页面较多，可以自行研究一下，下面为定制版中可以精简的文件。
index.html是所定制的UEditor编辑器的示例文件，删除之。
editor.js与editor.min.js内容相同，editor.min.js是editor.js的压缩版，使用时加载editor.min.js即可，所以editor.js也可以删除。
三、将UEditor部署到PHP程序上
1.将UEditor的所有文件放在PHP程序的目录中，这里我把文件放在/ueditor目录下。
2.在网页中引入UEditor文件
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor.min.js"></script>
3.在textarea标签下初始化UEditor
<script type="text/javascript">
var editor = new UE.ui.Editor();
textarea:''name''; //与textarea的name值保持一致
editor.render(''name'');
</script>
四、配置UEditor编辑器
editor_config.js是UEditor的配置文件，首先对路径进行配置。
修改第27行左右的路径配置(根据版本不同可能会有变动)
URL = "ueditor/"; //根据实际情况配置
保存，OK搞定，UEditor编辑器就能使用了，此时同样可以使用POST或者GET接收到提交的数据。
editor_config.js里还有很多常用的配置项目，比如编辑器初始内容、编辑器高度等等，需要配置时只需去掉该行代码前面的注释符号//即可。
使用定制版的童鞋可以下载一个完整版，里面的配置文件比较完整，有些东西可以COPY过来。
五、UEditor代码高亮
UEditor代码高亮使用了第三方的高亮JS组件 – SyntaxHighlighter，在测试的过程中问题不少，使用UEditor编辑器“插入代码”功能插入代码并提交到数据库后，在显示页面代码是不会高亮显示的，需要在该页面加载一下JS和CSS文件。
<script type="text/javascript" src="ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" />
<script>
SyntaxHighlighter.all() //执行代码高亮
</script>
还有一个问题，当再次使用UEditor编辑之前提交到数据库的代码时，编辑器会自动过滤掉代码中的很多标签，今天在微博上@了一下UEditor团队，UEditor团队的人说需要先转义。
我在提交至数据库之前用PHP的htmlspecialchars函数进行转义：
$content = htmlspecialchars(百度编辑器UEditor 简单使用教程分享_网学 网学推荐
免费论文
原创论文
文章排行榜
· 理解防火墙 屏蔽外界攻击 · 安装防火墙的十二个注意事项 · 企业中使用无线局域网如何进行安全 · 安装防火墙注意事项 · Cisco(思科)路由器上如何防止DDoS · 设定路由访存表防止黑客对防火墙发 · IP网络安全管理系统探讨 · 全面了解交换机漏洞 保护网络核心 · 层层设防保护VoIP安全 抵御隔墙之 · 简述常见黑客入侵方法以及工具防范 · 入侵检测(IDS)存在的问题及发展趋势 · 浅析防火墙与路由器的安全配置 · 实例讲解Oracle监听口令及监听器安 · 部署网络防火墙策略的十六条守则 · 部署网络防火墙策略 · 企业可轻松避免的十大安全地雷 · 计算机不能进安全模式的解决办法 · 无法格式化的U盘修复方法 POST[codeContent]);版权所有 QQ:3710167 邮箱：3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号
输出页面执行htmlspecialchars_decode函数后输出：
echo htmlspecialchars_decode($Row["content"]);
再查看了官方的文档，官方推荐把textarea容器更换为script容器
<script type="text/plain" id="content" name="content">
//从数据库中取出的内容打印到此处
</script>
此处采用了script标签作为编辑器容器对象，并设置了其类型是纯文本，从而在避免了标签内部JS代码执行的同时解决了使用传统的textarea标签作为容器所带来的一次额外转码问题，我同时使用了转义和更换textarea容器的方式。
简单测试了HTML、PHP、JAVASCRIPT和C++代码，暂时没发现问题。
总体来说，UEditor是一个很不错的富文本编辑器，但是由于开发时间不长，还需慢慢完善。
原文地址：http://www.1990c.com/?p=355
