网页前端设计

今天看到一个不错的编辑器，在这里分享给大家。最大的好处是支持批量图片上传和批量显示到编辑器中。记得前面跟大家写过【C#.net文件批量上传解决方案附下载(swfupload)】但是应用起来比较麻烦。现在有了这款UEditor，可以省去不少时间了。

最新UEditor编辑器下载,UEditor的配置教程。

介绍的一款百度出品的富文本编辑器UEditor！

体积小、功能强大、安全可靠。UEditor已经应用到百度百科、百度经验、百度空间等多个项目。

下面就介绍一下UEditor编辑器的配置方法。

1.下载ueditor编辑器
最新版下载地址：

• [1.2.6.0 完整版 + 源码] 完整版 + 源码 已下载11855次
• 2013-05-14 [1.2.6.0 PHP 版本] UTF-8版 已下载5754次 GBK版 已下载1925次
• 2013-05-14 [1.2.6.0 .Net 版本] UTF-8版 已下载3757次 GBK版 已下载1368次
• 2013-05-14 [1.2.6.0 Jsp 版本] UTF-8版 已下载4001次 GBK版 已下载1661次

解压后目录结构如下：

    * _examples：直接打开index.html即可看到效果（注：请将项目部署到服务器上，避免对话框图片无法加载等跨域问题）
    * demo：一些常用的示例和实现方式
    * _src：所有源码，部署时可删除，二次开发时可使用
    * dialogs：弹出对话框所引用的页面
    * themes：样式和图片
    * editor_ui_all.js：包含全部功能的js文件
    * editor_ui_all_min.js：包含全部功能的压缩文件，即editor_ui_all.js的压缩版
    * editor_config.js：编辑器的配置文件，这个脚本需要在其他脚本之前引用

2.部署编辑器到您的网站程序目录里，例如：http://您的域名/ueditor

3.修改HTML页面

   A. 在需要显示编辑器的位置准备一个容器，容器可以是textarea或者div。

      //id可以自己修改，在创建编辑器的时候将这个id传入即可
      //div作为容器的示例
          <div id="editor"></div>
      //textarea作为容器的示例
          <textarea id="editor">
              这里可以放编辑器初始化的内容，创建编辑器时，
               我们会将内容放到编辑器的编辑区域里
          </textarea>
      //两种创建编辑器的区别是：
      //div不可以在标签里设置初始值，在创建编辑器的时候配置initialContent参数
      //textarea可以在标签里设置初始值，不能配置initialContent参数
                             

   B. 在该HTML页面添加以下脚本

      //先引入配置文件（可以修改编辑器的高度，初始化内容等参数）
      <script type="text/javascript" src="/editor_config.js"></script>
      //包含全部功能的js文件
      <script type="text/javascript" src="/editor_ui_all.js"></script>
      //编辑器的默认样式
      <link type="text/css" href="/themes/default/ueditor.css"/>
      //创建编辑器
      <script type="text/javascript" charset="utf-8">
          var editor = new baidu.editor.ui.Editor();
          editor.render('editor');  //editor为编辑器容器的id
      </script>

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)