百度编辑器UEditor 简单使用

在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>

<span style="font-family: 宋体; font-size: 14px; line-height: 22px;">还有一个问题，当再次使用UEditor编辑之前提交到数据库的代码时，编辑器会自动过滤掉代码中的很多标签,</span><span style="font-family: 宋体;">在提交至数据库之前用PHP的htmlspecialchars函数进行转义：</span> 

    $content = htmlspecialchars($_POST[codeContent]);  

输出页面执行htmlspecialchars_decode函数后输出.

官方推荐把textarea容器更换为script容器,

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

HTML页面输出，如例子
<div style='padding: 0 15px;'><{$data.content|html_entity_decode}></div>