ueditor富文本编辑器实例
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...
前阵子基本搭建好了基于php的个人博客web，
不过一直在为自己博客文章内容录入的格式而烦恼，一开始是使用textarea来接收录入的内容，
可是效果和实现都不太理想，于是经过多方搜索得知有这么一个叫做富文本的编辑器。
综合自己的实际情况，我使用了ueditor的富文本编辑器实现我想要的功能和内容。
这个富文本编辑器使用的人数还是挺多的，文档也相对来说容易看懂。
接下来记录分享一下我就本网站实现添加应用ueditor富文本编辑器的过程。
1. 下载ueditor代码
地址：http://ueditor.baidu.com/website/download.html
文档：http://fex.baidu.com/ueditor/
建议不要下载最新版本的，适用性可能不是很好，我这里下载的是开发版的
[1.4.3.2 PHP 版本] UTF-8版
（一开始下载的是最新版本的，结果跟环境之间好像出现了问题，之后换成这个版本的之后，问题自己就解决了。）
2. 解压到工作目录下，改名为ueditor（我这里的工作目录为htdocs下的webroot）
3. 在ueditor目录下新建一个名为demo.html（名字随便）文件，用记事本打开，另存为utf-8编码的文件。内容如下
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
4. 确保自己开启了apache服务之后，访问demo.html查看效果。（有的话就基本ok）
5. 因为我这个是有使用到mysql数据库的，所以需要检查是否正常加载后台配置
UEditor 1.4.2+ 起，把前后端相关的配置项都放到后端文件 php/config.json 设置（配置介绍），在初始化时会向 serverUrl 发起获取后端配置的请求。
你可以测试你的网站下的路径 ueditor/php/controller.php?action=config 是否正常返回了json格式的后端配置内容，格式大致如下。如果这个请求出错，出现400、500等错误，编辑器上传相关的功能将不能正常使用。
6. 开始部署到自己站点，因为我是自己的个人博客，并没有开放注册，是自己在使用，所以一开始我就是想要应用于后台文章的添加，编辑。
上图的name里的neirong是我表单提交的关键字，之后提交到form里指定的action的地址里，编辑里的内容会自己加上html的格式标签（经过转换的，防止恶意攻击），经过表单的提交，之后你自己可以直接提交存储到数据库中，建议数据库对应的字段的类型修改为longtext类型。
还有就是注意<script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
这里上下几行里的src需要的话需要修改为自己对应的路径。
效果是这样的：
7. 前面就算是基本设置完成了文章添加的功能，接下来是回显编辑的工作了。
为了方便理解，我自己先录入了一篇文章。
地址：http://www.whatineed.我爱你/wenzhang/wen.php?title=31
在后台编辑回显的情况如下：
8. 开始修改编辑已录入的文章页面
<tr ><td colspan="2">
<!-- 加载编辑器的容器 -->
<script id="container" name="neirong" type="text/plain">
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="../ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="../ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
ue.ready(function() {
//设置编辑器的内容
ue.setContent('<?php echo html_entity_decode($row['neirong']);
//html_entity_decode函数使mysql获取的html格式的文本按照html格式显示?>');
//设置编辑器高度
ue.setHeight(450);
});
</script>
</td>
</tr>
上图添加的代码基本跟之前的无异，需要注意的是
ue.setContent('<?php echo html_entity_decode($row['neirong']);
这一行里显示的是编辑器里的内容，在我没有添加httml_entity_decode()函数之前，
输出的内容老是带着html标签输出，不知道是什么情况。那时候的情况是这样的:
甚至就显示在前端都是这个情况，当时都快崩溃了，经过百度没有找到解决方法，文档自己也没有找到解决方法，之后无意中发现添加这个函数之后，一切正常。
以上就是我关于这次的ueditor富文本编辑器的使用，这个富文本编辑器还有其他的功能，比如自己决定编辑框的功能，设置高度啥的，关于这个大家可以自己尝试呢。
那么本次的分享就到这里咯，大家下次见。