百度编辑器UEditor 简朴利用教程分享

百度UEditor利用札记

  UEditor是由百度WEB前端研发部开拓的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议答允范畴内可自由修改和利用。最近在开拓措施的时候需要集成一个富文本编辑器,UEditor的UI及UE比CKEditor、KindEditor要好出不少。所以简朴地对UEditor研究了一下,记录于此。

  一、下载UEditor编辑器

  可以在chinaz源码下载最新版本的百度编辑器:

  百度编辑器UEditor PHP版

  百度编辑器UEditor .NET版

  百度编辑器UEditor JSP版

  也可在UEditor官方网站:下载频道下载到最新版本的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=http://down.chinaz.com/"ueditor/editor_config.js"></script>
<script type="text/javascript" src=http://down.chinaz.com/"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=http://down.chinaz.com/"ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href=http://down.chinaz.com/"ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" /> <script>
SyntaxHighlighter.all() //执行代码高亮
</script>

  尚有一个问题,当再次利用UEditor编辑之前提交到数据库的代码时,编辑器会自动过滤掉代码中的许多标签,本日在微博上@了一下UEditor团队,UEditor团队的人说需要先转义。

  我在提交至数据库之前用PHP的htmlspecialchars函数举办转义:

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

  输出页面执行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++代码,临时没发明问题。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/9953.html