zoukankan      html  css  js  c++  java
  • 百度Ueditor在线编辑器的配置和图片上传

    一、 在线编辑器在页面正常显示

    1. 上百度Editor首页下载http://ueditor.baidu.com/website/

    2. COPY到自己的项目中去,然后记住ueditor所在文件的目录

    3. 配置editor_config.js中的URL(这一步很重要),因为我在html文件中测试的时候是没有修改配置文件的信息也可以用,但是用在项目编辑器就无法显示

     /**
         * 此处配置写法适用于UEditor小组成员开发使用,外部部署用户请按照上述说明方式配置即可,建议保留下面两行,以兼容可在具体每个页面配置window.UEDITOR_HOME_URL的功能。
         */
        var tmp = location.protocol.indexOf("file")==-1 ? location.pathname : location.href;
        URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");//这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径(指以http开头的绝对路径)
    /**
         * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
         */
        window.UEDITOR_CONFIG = {
    
            //为编辑器实例添加一个路径,这个不能被注释
            UEDITOR_HOME_URL : URL
    
            //图片上传配置区
            ,imageUrl:URL+"jsp/imageUp.jsp"             //图片上传提交地址
            ,imagePath:URL + "jsp/"                     //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置

    图片上传路径配置区域是在:ueditor.config.js里URL路径是直接指向了ueditor所在项目中的位置。如:/tools/editor/

    原因是window.UEDITOR_HOME_URL没有定义,只要在引入script脚本前声明并复制就可以正常使用了,见下代码:

    <!DOCTYPE HTML>
    <html>
    <head>
        <title>完整的demo</title>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk"/>
        <script>
            var UEDITOR_HOME_URL = "/ueditor/";  //从项目的根目录开始
        </script>
        <link type="text/css" href="./themes/default/css/ueditor.css" rel="stylesheet"/>
        <script type="text/javascript" src="./editor_config.js"></script>
        <script type="text/javascript" src="./editor_all.js"></script>
    </head>
    <body>
    <div>
        <script  id="myEditor" type="text/plain">欢迎使用</script>
    </div>
    <script type="text/javascript">
        //初始化
        var ue = UE.getEditor('myEditor');
    </script>
    </body>
    </html>

    还有一点就是,如果没有引入editor.css文件那么部分功能的显示将会没有那么好看。(废话。。。)

    二、 图片上传

    1. 具体包括imageUp.jsp和Uploader.java这两个文件

    2. 在jsp页面中只需要引入正确Uploader.java所在的包就行。

    3. 剩下的工作就是在Uploader.java中修改图片上传的目录、制定文件名生成规则等等。 做实现过程中让我很纠结的是:配置完成没问题了,但是就是图片上传不成功具体错误如下:

          3.1 在没有找到Uploader类的情况下就会报:网络设置不正确,上传失败(大概就是这个意思。。。)

      3.2 所有的工作都做完的情况下,上传图片就是不成功,捕获异常呢也捕获不到,最后设置断点之后才知道fii.hasNext()返回为false,根本原因就是:

    因为我用的是S2SH框架,在web.xml中struts2过滤器中把*.jsp去掉,如下代码应该去掉,那就OK了:

    1     <filter-mapping>
    2         <filter-name>struts2</filter-name>
    3         <url-pattern>*.jsp</url-pattern>
    4     </filter-mapping>
     1 public void upload() throws Exception{
     2         boolean isMultipart = ServletFileUpload.isMultipartContent(this.request);
     3         if (!isMultipart) {
     4             this.state = this.errorInfo.get("NOFILE");
     5             return;
     6         }
     7         DiskFileItemFactory dff = new DiskFileItemFactory();
     8         String savePath = this.getFolder(this.savePath);
     9         dff.setRepository(new File(savePath));
    10         try {
    11             ServletFileUpload sfu = new ServletFileUpload(dff);
    12             sfu.setSizeMax(this.maxSize * 1024);
    13             sfu.setHeaderEncoding("gbk");
    14             FileItemIterator fii = sfu.getItemIterator(this.request);
    15             while (fii.hasNext()) {
    16                 FileItemStream fis = fii.next();
    17                 if (!fis.isFormField()) {
    18                     this.originalName = fis.getName().substring(fis.getName().lastIndexOf(System.getProperty("file.separator")) + 1);
    19                     if (!this.checkFileType(this.originalName)) {
    20                         this.state = this.errorInfo.get("TYPE");
    21                         continue;
    22                     }
    23                     this.fileName = this.getName(this.originalName);
    24                     this.type = this.getFileExt(this.fileName);
    25                     this.url = savePath + "/" + this.fileName;
    26                     BufferedInputStream in = new BufferedInputStream(fis.openStream());
    27                     FileOutputStream out = new FileOutputStream(new File(this.getPhysicalPath(this.url)));
    28                     BufferedOutputStream output = new BufferedOutputStream(out);
    29                     Streams.copy(in, output, true);
    30                     this.state=this.errorInfo.get("SUCCESS");
    31                     //UE中只会处理单张上传,完成后即退出
    32                     break;
    33                 } else {
    34                     String fname = fis.getFieldName();
    35                     //只处理title,其余表单请自行处理
    36                     if(!fname.equals("pictitle")){
    37                         continue;
    38                     }
    39                     BufferedInputStream in = new BufferedInputStream(fis.openStream());
    40                     BufferedReader reader = new BufferedReader(new InputStreamReader(in));
    41                     StringBuffer result = new StringBuffer();  
    42                     while (reader.ready()) {  
    43                         result.append((char)reader.read());  
    44                     }
    45                     this.title = new String(result.toString().getBytes(),"gbk");
    46                     reader.close();  
    47                 }
    48             }
    49         } catch (Exception e) {
    50             e.printStackTrace();
    51             this.state = this.errorInfo.get("UNKNOWN");
    52         }
    53     }
  • 相关阅读:
    chrome浏览器,阻止回调方法中的window.open()方法
    安装1.4.2版本的Django
    noindex与nofllow标签的作用和用法
    mybatis中写sql语句时需要转义的字符
    GridView 导出到Excel
    (转)利用Cache防止同一帐号重复登录 (c#) .
    利用NPOI 导出文件到Excel (导出合同)
    TreeView控件的属性和事件【转】
    C# 数字货币转换大写方法
    Server 2003 IIS 发布网站
  • 原文地址:https://www.cnblogs.com/xmaomao/p/3108895.html
Copyright © 2011-2022 走看看