UEditor配置，上传图片和附件及其他使用方法

最新推荐文章于 2024-06-26 18:00:54 发布

SpringFiled

最新推荐文章于 2024-06-26 18:00:54 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/SpringFileld/article/details/26551433

版权

UEditor配置，上传图片和附件及其他使用方法

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于BSD协议，允许自由使用和修改代码。这简直是Web开发富文本框输入的一大神器！最低来说，使用百度的富文本编辑器，无论是本地化还是相关操作学习文档，都比国外的FCKEdit神马的要好的多！

首先是下载地址：http://ueditor.baidu.com/website/ipanel/panel.html

下载时可以下载完整包，或者功能定制化下载；如果网站对富文本编辑器需求比较明确，尽量使用定制化下载，经测试，如果下载完整包，每次页面请求有800K内容，定制化下载后简单优化一下，页面可以缩小到600K甚至更小…。如果页面访问量不大，对编辑器需求也不太明确，建议下载完整包罗，需要的功能通过配置后下载配置文件，以后只需在网站上更新UEditor的配置文件就可以完成功能更新了！

基础配置

UEditor除了具有功能强大、可定制等优点外，还始终将优化编辑操作、提升用户体验摆在了很重要的位置。在这一点上，除了对编辑器功能、性能、实现细节等不断地改进和追求创新之外，众多灵活而个性化的自定义配置也充分体现了这个特点。通过修改配置，用户几乎可以完全地改变编辑器的外观和行为。

从配置本身的优先级来看，UEditor的配置可以分为系统默认配置和用户自定义配置两种类型。系统默认配置分散在各个对应的核心或者插件文件之中，对用户不可见。当用户注释掉自定义配置时起作用。用户自定义配置包括两种类型，一种位于editor_config.js文件之中，优先级高于系统默认配置；另一种位于实例化编辑器时传入的参数中，优先级最高。默认情况下，UEditor在editor_congfig.js注释掉了所有可以省略的配置项，采用系统默认配置，若取消注释，则以该配置项为准；未注释的配置项要求用户必需按照项目实际填写。

这里以.net环境和Visual Studio开发工具为例，看看UEditor的配置；

在解决方案中新建目标文件夹用于放置UEditor的所有文件内容，我放在目标文件夹（Scripts）下

使用VS时添加现有项太麻烦？有一个快捷办法，将UEditor解压缩后的整个文件夹复制到目标文件夹（Scripts）中，在VS的项目管理器上点击显示所有文件按钮，解决方案资源管理器的目标文件夹下可以找到UEditor的文件夹了，但是文件夹显示是隐藏状态，

右键点击文件夹，选择包括在项目中，VS自动将UEditor下的文件夹和文件全部加载到解决方案资源管理器中。

在页面上加载UEditor

不论是功能定制化还是使用所有功能，配置都是在editor_config.js文件中设置。首先最主要的设置是该文件内的URL参数，editor_config.js可以找到URL参数进行配置，但是如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，可能不适用于每个页面的编辑器。因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可：var URL = "/UETest/ueditor/"，同时注释掉editor_config.js文件的URL参数；

这里强烈建议在每个使用UEditor的页面中对URL进行声明，否则造成许多不必要的问题；

URL的参数值可以使用相对路径和绝对路径，最终指向UEditor文件夹即可，强烈建议使用绝对路径，例如：http://www.baidu.com/Scripts/ueditor/，千万不要忘记最后的”/”结束。

项目中引用文件夹和配置URL参数后，看看页面中如何使用UEditor吧：

新建使用UEditor的页面，在Head中声明如下引用：editor_config.js，editor_all_min.js和ueditor.css，Css文件根据使用的模版指向正确的地址

[javascript] view plain copy print ?

<"font-family:Microsoft YaHei;font-size:14px;">    "X-UA-Compatible"content="IE=8"/>
    "Content-Type"content="text/html;charset=utf-8"/>
    src="../Scripts/ueditor1_2_4_0-utf8-net/editor_config.js">
    src="../Scripts/ueditor1_2_4_0-utf8-net/editor_all_min.js">
    "../Scripts/ueditor1_2_4_0-utf8-net/themes/default/css/ueditor.css"rel="stylesheet"/>
    >
        $(function() {
            vareditor = new UE.ui.Editor();
          editor.render('editor');
      })

<span> </span>

在头文本中使用var editor=new UE.ui.Editor()声明富文本编辑器；

最后，在页面需要使用UEditor的地方声明使用即可，代码：

上传图片

下面上传图片依旧以.net为例，不使用.net的玩家可以跳过；

首先看看上传图片的配置：

1. 如果你的.net framework版本小于4.0，请删掉/net/web.config，然后使用vs2008或者vs2005自带的web.config

2. 如果你的版本等于4.0，请检查editor_config.js中的URL变量配置(注意：一定要用绝对路径)

3. 图片上传需要前后端的协作：A.在前端，UEditor提取了几个常用的配置到editor_config.js中，如imagePath，compressSide，maxImageSideLength具体代表的含义请参考对应注释。当然，更多的配置还需要在image.html文件中完成，比如提交地址url等，具体含义同样请参考对应位置的注释。B、在后端，需要配置文件的保存路径uploadPath，保存完成之后需要返回一个包含图片地址的json字符串给前端。C、返回的json字符串必须符合如下格式{'url':'图片地址','state':'SUCCESS','title':'图片title'}。其中state的值依据实际情况返回，只有当图片真正保存成功时才是“SUCCESS”.

4. 完成了上述的配置之后，如果图片提示没有上传成功，则需要分以下几个步骤检查：A、确定图片是否已经正确保存到指定的目录。如果已经保存，则检查返回的json数据格式和内容，否则请检查图片保存路径是否正确、文件夹是否具有写入权限等。B、检查返回数据格式的方法：在image.html文件中的uploadCompleteCallback回调中设置一个断点，跟踪返回值是否如预期。

上述问题都检查完后，如果图片仍然无法上传，检查Uploader.cs文件的属性，官方下载的UEdiotor默认将该文件的生成属性设置为“编译”，将编译修改为“内容”，重新生成项目，重试文件上传功能；

图片现在能成功上传后，再来仔细看看图片上传的相关配置：