百度编辑器UEditor 简单使用教程分享

  • 时间:
  • 浏览:10
  • 来源:湖北快3网投平台-吉林快3投注平台_极速快3娱乐平台
作者:匿名 hihi 来源:1990c 浏览: 2012-8-13 11:10:1000 字号:大 中 小

[摘要]百度编辑器UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。本文是作者在研究UEditor富文本编辑器时的某些记录,在这分享给读者。

  UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。最近在开发tcp连接的已经 时要集成1个多富文本编辑器,UEditor的UI及UE比CKEditor、KindEditor要好出不少。全都 简单地对UEditor研究了一下,记录于此。

  一、下载UEditor编辑器

  都时要在chinaz源码下载最新版本的百度编辑器:

  百度编辑器UEditor PHP版 http://down.chinaz.com/soft/1000289.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编码,推荐使用定制下载,按需求定制,将会tcp连接就有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部署到PHPtcp连接上

  1.将UEditor的所有文件放进PHPtcp连接的目录中,这里我把文件放进/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里还有全都 常用的配置项目,比如编辑器初始内容、编辑器宽度等等,时要配置时只需添加该行代码前面的注释符号//即可。

  使用定制版的童鞋都时要下载1个多完完全,上面的配置文件比较完全,某些东西都时要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>

  还有1个多问題报告 ,当再次使用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++代码,暂时没发现问題报告 。

  总体来说,UEditor是1个多很不错的富文本编辑器,倘若将会开发时间不长,还需慢慢完善。

  原文地址:http://www.1990c.com/?p=355

sssss
Tags: UEditor   百度编辑器   富文本编辑器   百度编辑器教程   UEditor教程  
责任编辑:azha