转载

ueditor的配置和使用

ueditor下载好之后直接复制到项目的WebContent目录下,并将ueditor/jsp/lib下的jar包复制或者剪切到项目的lib目录下。先看一下效果,如下:

ueditor的配置和使用

1.文件的上传

首先在ueditor/jsp目录下找到config.json文件,就拿Image上传来说吧。

"imageUrlPrefix": "http://localhost:8080/HJZGG_BLOG", /* 图片访问路径前缀 */。开始的时候imageUrlPrefix这个属性值是空的。

另外一个就是"imagePathFormat": "/fileUpload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */。这个我已经改过了。

2.ueditor和struct2整合

如果项目中使用了Apache Struts2框架,将/* 过滤 ,由于该框架默认使用Apache的Commons FileUpload组件,和内建的FileUploadInterceptor拦截器实现文件上传,将request中的文件域封装到action中的一个File类型的属性中,并删除request中的原有文件域,这样就会导致ueditor文件上传不能成功。

解决办法:重写struct2的过滤器,对ueditor的请求不进行过滤。

 import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;      /**       * Servlet Filter implementation class MyStrutsPrepareAndExecuteFilter       */          public class MyStrutsPrepareAndExecuteFilter extends StrutsPrepareAndExecuteFilter{          public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {                 HttpServletRequest req = (HttpServletRequest) request;                     String url = req.getRequestURI();                     if (url.contains("/ueditor/jsp/controller.jsp")) {//ueditor的不过滤                     chain.doFilter(request, response);                     }else{                         super.doFilter(request, response, chain);                     }              }      } 

注意:只是重写StrutsPrepareAndExecuteFilter的doFilter方法,不要重写其他的,否则可能会出错。

然后更改web.xml中filter的配置

   <filter>     <filter-name>struts2</filter-name>     <filter-class>       <!--org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter 这是之前的配置-->          com.blog.filter.MyStrutsPrepareAndExecuteFilter     </filter-class>   </filter>   <filter-mapping>     <filter-name>struts2</filter-name>     <url-pattern>/*</url-pattern>     <dispatcher>REQUEST</dispatcher>     <dispatcher>FORWARD</dispatcher>   </filter-mapping> 

3.ueditor的初始化细节

从ueditor/index.html中可以看到,实例化编辑器, 建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例,即如下:

var ue = UE.getEditor('editor'), 我们可以找到函数的原型中还有一个参数,就是用来初始化ueditor的属性的。函数原型位于 ueditor.all.js 中。

    UE.getEditor = function (id, opt) {          var editor = instances[id];          if (!editor) {              editor = instances[id] = new UE.ui.Editor(opt);              editor.render(id);          }          return editor;      }; 

初始化,例如:var ue = UE.getEditor('editor', {initialFrameHeight:340,initialFrameWidth:760,maximumWords:1000,autoHeightEnabled:false});

我们定义了初始高度、初始宽度、最大输入字数,不允许自动增高(尤其是最后这个,当你放入很大的图片后,编辑框总是会变得很高)

如果我没有设置autoHeightEnabled:false这个参数, 编辑框总是会随着图片的拉伸变得很高。

4.解决ueditor上传图片后属性title的内容

图片上传之后,鼠标放在图片上,出现title属性的内容,这个内容是图片的随机名称,看着可不爽。

解决办法:首先看你引用的是ueditor.all.js还是ueditor.all.min.js, 到相应的文件ctrl+F,寻找“loader.setAttribute('title', json.title || '')”,

然后自己可以设置title的值。具体函数如下。

   function callback(){          try{              var link, json, loader,                  body = (iframe.contentDocument || iframe.contentWindow.document).body,                  result = body.innerText || body.textContent || '';              json = (new Function("return " + result))();              link = me.options.imageUrlPrefix + json.url;              if(json.state == 'SUCCESS' && json.url) {                  loader = me.document.getElementById(loadingId);                  loader.setAttribute('src', link);                  loader.setAttribute('_src', link);                  //loader.setAttribute('title', json.title || '');                  loader.setAttribute('title', 'hjzgg-blog');                  loader.setAttribute('alt', json.original || '');                  loader.removeAttribute('id');                  domUtils.removeClasses(loader, 'loadingclass');              } else {                  showErrorLoader && showErrorLoader(json.state);              }          }catch(er){              showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));          }          form.reset();          domUtils.un(iframe, 'load', callback);      } 

ueditor的配置和使用1.首先在ueditor/jsp目录下找到config.json文件,就拿Image上传来说吧,"imageUrlPrefix": "http://localhost:8080/HJZGG_BLOG", /* 图片访问路径前缀 */ 开始的时候imageUrlPrefix这个属性值是空的。2.ueditor和struct2整合如果项目中使用了Apache Struts2框架,将/* 过滤 ,由于该框架默认使用Apache的Commons FileUpload组件和内建的FileUploadInterceptor拦截器实现文件上传,将request中的文件域封装到action中的一个File类型的属性中,并删除request中的原有文件域,这样就会导致ueditor文件上传不能成功。解决办法:重写struct2的过滤器,对ueditor的请求不进行过滤。import java.io.IOException;import javax.servlet.FilterChain;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import javax.servlet.http.HttpServletRequest;import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;/** * Servlet Filter implementation class MyStrutsPrepareAndExecuteFilter */public class MyStrutsPrepareAndExecuteFilter extends StrutsPrepareAndExecuteFilter{public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {   HttpServletRequest req = (HttpServletRequest) request;           String url = req.getRequestURI();           if (url.contains("/ueditor/jsp/controller.jsp")) {//ueditor的不过滤           chain.doFilter(request, response);           }else{               super.doFilter(request, response, chain);           }    }}注意:只是重写StrutsPrepareAndExecuteFilter的doFilter方法,不要重写其他的,否则可能会出错。3.ueditor的初始化细节实例化编辑器, 建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例    var ue = UE.getEditor('editor'), 我们可以找到函数的原型中还有一个参数,就是用来初始化ueditor的属性的。    UE.getEditor = function (id, opt) {        var editor = instances[id];        if (!editor) {            editor = instances[id] = new UE.ui.Editor(opt);            editor.render(id);        }        return editor;    };       例如:var ue = UE.getEditor('editor', {initialFrameHeight:340,initialFrameWidth:760,maximumWords:1000,autoHeightEnabled:false});   我们定义了初始高度、初始宽度、最大输入字数,不允许自动增高(尤其是最后这个,当你放入很大的图片后,编辑框总是会变得很高)       如果我没有设置autoHeightEnabled:false这个参数的话效果是这样的(编辑框一直在升高)      4.解决ueditor上传图片 图片属性title的内容   看你引用的是ueditor.all.js还是ueditor.all.min.js, 到相应的文件ctrl+F,寻找“loader.setAttribute('title', json.title || '')”,   然后自己可以设置title的值。具体函数如下。   function callback(){        try{            var link, json, loader,                body = (iframe.contentDocument || iframe.contentWindow.document).body,                result = body.innerText || body.textContent || '';            json = (new Function("return " + result))();            link = me.options.imageUrlPrefix + json.url;            if(json.state == 'SUCCESS' && json.url) {                loader = me.document.getElementById(loadingId);                loader.setAttribute('src', link);                loader.setAttribute('_src', link);                //loader.setAttribute('title', json.title || '');                loader.setAttribute('title', 'hjzgg-blog');                loader.setAttribute('alt', json.original || '');                loader.removeAttribute('id');                domUtils.removeClasses(loader, 'loadingclass');            } else {                showErrorLoader && showErrorLoader(json.state);            }        }catch(er){            showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));        }        form.reset();        domUtils.un(iframe, 'load', callback);    }

正文到此结束
Loading...