[asp.net] xheditor 圖片上傳 功能

来源:互联网 发布:南朝和北朝的关系知乎 编辑:程序博客网 时间:2024/04/28 14:24

最近在一个开发源码的系统里,把原来html编辑器换成了国产开源的xhEditor。在此记录下嵌入的步骤和注意事项。

(目前在此写的就是xhEditor,呵呵。CSDN用的就是这个)


1. 下载:

      http://xheditor.com/ 下载最新版本编辑器


2.相关目录文件放入项目:

    1)把解压包里的xheditor_emot  xheditor_plugins xheditor_skin 目录以及xheditor-1.1.10-zh-cn.min.js 放到指定的JS目录里

          (比如我放到了EnterpriseWeb.Web\Admin\js\xhEditor)

     2)把压缩包里的demos\upload.aspx 和 saveremoteimg.aspx   放到与js同级的目录下(如:EnterpriseWeb.Web\Admin)


3.修改配置文件:

    修改upload.aspx文件:找到 attachdir ,改为 string attachdir = Page.ResolveUrl("~/upload");     // 上传文件保存路径,结尾不要带/

    (也可不修改,不修改则以后上传的图片放到了EnterpriseWeb.Web\Admin下的upload目录,按以上修改是放到了根目录EnterpriseWeb.Web下的upload下 )


4.修改相应界面:

   修改需要用到xheditor编辑器的页面:

   1)在第一行 <%@ Page Language="C#" .... 中增加参数 ValidateRequest="false"  (这样就不会提交时失败提示安全隐患,当然这样可能会不安全,还需要别的地方控制)

   2)加入 js 代码(这里控制编辑器用了JQUERY ,路径根据具体情况可修改):如下

          <script src="js/jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function() {

 $('#' + '<%=elm1.ClientID %>').xheditor({ upLinkUrl: "upload.aspx", upLinkExt: "zip,rar,txt", upImgUrl: "upload.aspx", upImgExt: "jpg,jpeg,gif,png", upFlashUrl: "upload.aspx", upFlashExt: "swf", upMediaUrl: "upload.aspx", upMediaExt: "avi" });

        })

    </script>

<script src="js/xhEditor/xheditor-1.1.10-zh-cn.min.js" type="text/javascript"></script>

3)在需要用到编辑器的地方加入如下代码:(id="elm1"需要与以上JS相对应)

      <textarea id="elm1" runat="server" name="txtContent" rows="12" cols="80" style="width: 80%"></textarea>


注:这是我做例子时总结的,只是个简单搭建过程。

        具体一些代码参数的含义以及更多丰富的功能可以到官网具体查看

出现错误时,可尝试直接打开upload.aspx文件运行,可以看到可能的错误

原创粉丝点击