zoukankan      html  css  js  c++  java
  • 百度编辑器UEditor 简单使用教程分享

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

      一、下载UEditor编辑器

      百度编辑器UEditor PHP版 

      也可在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({
    //但单个的页面中配置ueditor,不影响其它ueditor,如:
      initialFrameWidth:600,
      initialFrameHeight:320
    });
    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($_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是一个很不错的富文本编辑器,但是由于开发时间不长,还需慢慢完善。

    时不我待,不负韶华!立刻行动!不吃学习的苦就会吃生活的苦!
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 黑色星期五
    Java实现 蓝桥杯VIP 算法训练 比赛安排
    Java实现 蓝桥杯VIP 算法训练 比赛安排
    Java实现 蓝桥杯VIP 算法训练 斜率计算
    Java实现 蓝桥杯VIP 算法训练 斜率计算
    Java实现 蓝桥杯VIP 算法训练 整数平均值
    Java实现 蓝桥杯VIP 算法训练 整数平均值
    控件动态产生器(使用RegisterClasses提前进行注册)
    Delphi编写自定义控件以及接口的使用(做了一个TpgDbEdit)
    Log4delphi使用心得
  • 原文地址:https://www.cnblogs.com/zrp2013/p/3036914.html
Copyright © 2011-2022 走看看