源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

ckeditor和ueditor那个好 CKEditor和UEditor使用比较

  • 时间:2022-07-02 17:22 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:ckeditor和ueditor那个好 CKEditor和UEditor使用比较
[b]CKEditor和UEditor使用比较 [/b] 本来项目中使用CKEditor已经做好了的富文本编辑器的功能,但是业务考虑到美观性要求换成UEditor,所以就在这里总结下 先说下使用这两个不同插件的感想,我用的ueditor是1.4.3的版本:(ueditor API) UEditor:ueditor更注重用户体验,而且使用起来较ckeditor简单,但是ueditor在处理前后台交互时相比于ckeditor稍显麻烦 ckeditor:ckeditor不像ueditor,更多的方法需要自己去实现,但是毕竟是老牌富文本编辑器,如果之前有写过这些方法的话,集成ckeditor个人觉得还是比ueditor更方便简单。 [b]CKEditor的使用[/b] 在jsp页面下引入ckeditor下的ckeditor.js(当然首先要引入jQuery.js,引入插件类库ckeditor-Java-core-3.5.3.jar)
<script type="text/javascript" src="${basePath}/js/ckeditor/ckeditor.js"></script>
//引入js后在textarea标签上添加一个richText=”true”这个属性即可
<textarea name="wxChoiceInfo.infoTextConte" id="wxChoiceInfoInfoTextConte" richText="true" cols="110" rows="15"></textarea>
获取ckeditor中的内容
Var content = CKEDITOR.instances.wxChoiceInfoInfoTextConte.getData(content);

//初始化
 $(function() {
//富文本字段初始化
$("[richText]").each(function (e) { 
 CKEDITOR.replace($(this).attr("id"),{ 
  height : 400,
 skin : 'kama',
 language : 'zh-cn',
filebrowserImageUploadUrl:'${basePath}/wxdate/ck_upload.action?fileType=1',
 toolbar: 'ToolbarCommon',
  resize_enabled: false
 });
});
});
Action配置
<!-- FckEdit上传-->
<action name="ck_upload" class="com.ccxe.wxdate.action.CkeditorUploadAction">
 <param name="fileSize">5120000</param> <!-- 上传文件大小 -->
</action>
CkeditorUploadAction类源码
//CkeditorUploadAction类源码
public class CkeditorUploadAction extends ActionSupport {

 private static final long serialVersionUID = 1L;
 private File upload;
 private String uploadContentType;
 private String uploadFileName;
 //文件大小
 private long fileSize;
 //取文件路径
 private String fileType;
 
 public String getFileType() {
  return fileType;
 }

 public void setFileType(String fileType) {
  this.fileType = fileType;
 }

 public long getFileSize() {
  return fileSize;
 }

 public void setFileSize(long fileSize) {
  this.fileSize = fileSize;
 }

 public File getUpload() {
  return upload;
 }

 public void setUpload(File upload) {
  
  this.upload = upload;
 }

 public String getUploadContentType() {
  return uploadContentType;
 }

 public void setUploadContentType(String uploadContentType) {
  this.uploadContentType = uploadContentType;
 }

 public String getUploadFileName() {
  return uploadFileName;
 }

 public void setUploadFileName(String uploadFileName) {
  this.uploadFileName = uploadFileName; }

 public String execute() throws Exception {
  try {
   HttpServletResponse response = ServletActionContext.getResponse();
   response.setContentType("text/html;charset=UTF-8");
   PrintWriter out = response.getWriter();
   
   String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum"); 
   //对文件进行校验
   if(upload==null || uploadContentType==null || uploadFileName==null){
    //out.print("<font color=\"red\" size=\"2\">*请选择上传文件</font>");
    String path = "";  
     String alt_msg = "*请选择上传文件";  
     out.print("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" 
         + callback  
         + ", '" 
         + path  
         + "' , '" 
         + alt_msg  
         + "');</script>"); 
    return null;
   }
   if ((uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) && (uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".jpg")||uploadFileName.substring(uploadFileName.length() - 5).toLowerCase().equals(".jpeg"))) {
    //IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
   }else if((uploadContentType.equals("image/x-png") || uploadContentType.equals("image/png")) && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".png")){
    
   }else if(uploadContentType.equals("image/gif") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".gif")){
    
   }else if(uploadContentType.equals("image/bmp") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".bmp")){
    
   }else{
    //out.print("<script language=\"javascript\">alert(\"*文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)\");return false;</script>");
     String path = "";  
      String alt_msg = "*请选择图片文件格式(必须为.jpg/.jpeg/.gif/.bmp/.png文件)";  
      out.print("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" 
          + callback  
          + ", '" 
          + path  
          + "' , '" 
          + alt_msg  
          + "');</script>");  

    return null;
   }
   
   if(upload.length() > this.getFileSize()){
    //out.print("<font color=\"red\" size=\"2\">*文件大小不得大于"+this.getFileSize()/(1000*1024)+"m</font>");
     String path = "";  
      String alt_msg = "*请选择上传"+this.getFileSize()/(1000*1024)+"M以内的图片文件";  
      out.print("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" 
          + callback  
          + ", '" 
          + path  
          + "' , '" 
          + alt_msg
          + "');</script>");
    return null;
   }
   String imagePath = "";
   
   //imagePath路径的设置
   WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext();
   WxConfig wxConfig = (WxConfig)wac.getBean("wxConfig");
   //if(fileType.equals(PubParaConstants.DC_CK_UPLOAD_PATTH_PARAM.DC_CK_UPLOAD_PATTH_PARAM_PROSELECT)) {
    imagePath = wxConfig.getFilePath();
   //}
   //WxConfig wxConfig;
   File directory = new File(imagePath);
   if(!directory.isDirectory()) {
    directory.mkdirs();
   }
   //将文件保存到项目目录下
   InputStream is = new FileInputStream(upload);
   Date date = new Date(); // 获得系统时间,用于生成文件名
   long lTime = date.getTime();
   String fileName = DateUtil.toStringNoInterval(date, 8)+"_"+lTime; 
   fileName += FileUtil.getFileSuffix(uploadFileName);
   File toFile = new File(imagePath, fileName);
   OutputStream os = new FileOutputStream(toFile);  
   byte[] buffer = new byte[1024];  
   int length = 0;
   while ((length = is.read(buffer)) > 0) {  
     os.write(buffer, 0, length);  
   }  
   is.close();
   os.close();
   
   //设置返回“图像”选项卡
   
   String callbackUrl = ServletActionContext.getRequest().getContextPath() +"/fckImageReader.servlet?fold="+this.getFileType()+"&imageName="+fileName;
   out.println("<script type=\"text/javascript\">"); 
   out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'"+ callbackUrl + "','')"); 
   out.println("</script>");
  } catch (Exception e) {
   e.printStackTrace();
  }
  return null;
 }
 
}
图片回显到编辑器的servlet代码
/**
 * 文件流方式读取本地图片文件(图片回显处理)
 * FckImageReaderServlet
 */
public class FckImageReaderServlet extends HttpServlet {
 
 private static final long serialVersionUID = 1L;

 public void init() throws ServletException {
 }
 
 public void doGet(HttpServletRequest request, HttpServletResponse response) {
  this.doPost(request, response);
 }
 
 public void doPost(HttpServletRequest request, HttpServletResponse response) {
  try {
   //得到文件名称
   String imageName = request.getParameter("imageName");
   String foldType = request.getParameter("fold");
   String imagePath = "";
   
   //imagePath路径的设置
   WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext();
   WxConfig wxConfig = (WxConfig)wac.getBean("wxConfig");//模块配置文件
   //if(fileType.equals(PubParaConstants.DC_CK_UPLOAD_PATTH_PARAM.DC_CK_UPLOAD_PATTH_PARAM_PROSELECT)) {
    imagePath = wxConfig.getFilePath();
   //}
   if (imageName != null) {
    String imageExt = imageName.substring(imageName.lastIndexOf(".") + 1); //扩展名
    //得到配置文件路径
    String imageDir = imagePath+"/"+imageName; //文件全局路径
    
    File inputFile = new File(imageDir);
    if (inputFile.exists()) {
     //BufferedImage input = ImageIO.read(inputFile);
     // 禁止图像缓存。
     response.setHeader("Pragma", "no-cache");
     response.setHeader("Cache-Control", "no-cache");
     response.setDateHeader("Expires", 0);
     //response.setContentType("image/jpeg");
     // 将图像输出到Servlet输出流中。
//     ServletOutputStream sos = response.getOutputStream();
//     ImageIO.write(input, imageExt, sos);
//     sos.flush();
//     sos.close();
      InputStream in = new FileInputStream(inputFile);
      OutputStream os = response.getOutputStream(); //创建输出流
       byte[] b = new byte[1024]; 
       while( in.read(b)!= -1){ 
       os.write(b);   
       }
       in.close(); 
       os.flush();
       os.close();
    }
   } 
  } catch (Exception e) {
   e.printStackTrace();
  }
 }
}

web.xml
Web.xml配置FckImageReaderServlet
<!-- FCK -->
<servlet> 
 <servlet-name>FckReader</servlet-name> 
 <servlet-class>com.***.common.file.FckImageReaderServlet</servlet-class> 
</servlet>
<servlet-mapping>
  <servlet-name>FckReader</servlet-name>
  <url-pattern>/fckImageReader.servlet</url-pattern>
</servlet-mapping>
[b]再来看UEditor:[/b]
//引入相关的js和css
 <script type="text/javascript" src="${basePath}/js/ueditor/ueditor.config.js"></script>
 <script type="text/javascript" src="${basePath}/js/ueditor/ueditor.all.js"></script>
 <link type="text/css" rel="stylesheet" href="${basePath}/js/ueditor/themes/default/css/ueditor.css" rel="external nofollow" >
jsp页面部分代码:
<form action="<s:url value="/p2p/updateIProductServices.action"/>" method="post" id="form">
<tr id="proInvSerTr">
     <th>投资服务流程 <input type="hidden" id="hidInvestProcess" name="productServices.investSerProcess"/></th>
     <td>
      <!-- 加载编辑器的容器 -->
       <script id="container" name="content" type="text/plain">${productServices.investSerProcess}</script>
     <!-- 实例化编辑器 -->
     <script type="text/javascript">
       var ue = UE.getEditor('container');
       </script>
     </td>
    </tr>
<input type="button" value="保存" class="ImgButton"  onclick="submitForm"/>
</form>
<script type="text/javascript">
function submitForm(){
  $("#hidInvestProcess").val(ue.getContent());
 $("#form").submit();
}
说了那么多,那使用ueditor怎么修改文件上次的路劲呢,在1.4.3版本下,找到ueditor\jsp\config.json文件 找到上次图片配置项的"imageUrlPrefix": "/", /* 图片访问路径前缀 */ "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}" //这里是我改过了的上传路径 注意要修改imageUrlPrefix,因为编辑器中图片显示路径是imageUrlPrefix+imagePathFormat,如果不修改imageUrlPrefix图片是不能正常显示的,imagePathFormat这个上传路径是相对于服务器的相对路径。 使用ueditor最主要的就是需要修改web.xml中得struts的过滤器了,这个项目的前台要求全部使用.html结尾,如果不修改的话,struts就会把上传的静态页面image.html当成action去处理了会报404,修改代码如下:
<filter>
   <filter-name>struts2</filter-name>
   <filter-class>com.***.***.filter.CommonFilter</filter-class>
   <init-param>
   <param-name>config</param-name>
   <param-value>../config/struts.xml</param-value>
  </init-param>
 </filter>
 <filter-mapping>
   <filter-name>struts2</filter-name>
   <url-pattern>/*</url-pattern>
 </filter-mapping>
filter的代码
public class CommonFilter extends StrutsPrepareAndExecuteFilter{

 @Override
 public void doFilter(ServletRequest req, ServletResponse resp,
   FilterChain chain) throws IOException, ServletException {
  HttpServletRequest request = (HttpServletRequest)req;
  String url = request.getRequestURI();
  if(url.contains("/ueditor")){
   chain.doFilter(req, resp);
  }else{
   super.doFilter(req, resp, chain);
  }
 }
}
有什么问题,欢迎各位指正。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部