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

CKEditor和UEditor使用比较

本来项目中使用CKEditor已经做好了的富文本编辑器的功能,但是业务考虑到美观性要求换成UEditor,所以就在这里总结下

先说下使用这两个不同插件的感想,我用的ueditor是1.4.3的版本:(ueditor API)

UEditor:ueditor更注重用户体验,而且使用起来较ckeditor简单,但是ueditor在处理前后台交互时相比于ckeditor稍显麻烦
ckeditor:ckeditor不像ueditor,更多的方法需要自己去实现,但是毕竟是老牌富文本编辑器,如果之前有写过这些方法的话,集成ckeditor个人觉得还是比ueditor更方便简单。

CKEditor的使用

在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>

再来看UEditor:

//引入相关的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)

相关推荐

  • 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介

    1.UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 主要特点: 轻量级:代码精简,加载迅速. 定制化: 全新的分层理念,满足多元化的需求. 采用三层架构: 1. 核心层: 为命令层提供底层API,如range/selection/domUtils类. 2. 命令插件层: 基于核心层开发command命令,命令之间相互独立. 3. 界面层: 为命令层提供用户使用界面. 满

  • Ueditor和CKeditor 两款编辑器的使用与配置方法

    一丶ueditor 百度编辑器 1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html 2.百度编辑器的好:Editor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点. 3.如果想定制你想要的编辑器功能:查看官方网站的下载页面即可. 4.编辑器展示: 5.百度编辑器配置. 1.载入js,css文件 <script src="ueditor/editor_config.js"

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

    CKEditor和UEditor使用比较 本来项目中使用CKEditor已经做好了的富文本编辑器的功能,但是业务考虑到美观性要求换成UEditor,所以就在这里总结下 先说下使用这两个不同插件的感想,我用的ueditor是1.4.3的版本:(ueditor API) UEditor:ueditor更注重用户体验,而且使用起来较ckeditor简单,但是ueditor在处理前后台交互时相比于ckeditor稍显麻烦 ckeditor:ckeditor不像ueditor,更多的方法需要自己去实现,但

  • ASP.NET中集成百度编辑器UEditor

    0.ueditor简介 UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点.开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用. UEditor官网:http://ueditor.baidu.com/website/index.html UEditor官方文档地址: http://fex.baidu.com/ueditor/ 1.将ueditor包导入项目 将从官网上下载的开发包解压后包含到项目中 (注:最新的代码需要时基于

  • CKEditor与dotnetcore实现图片上传功能

    本文实例为大家分享了CKEditor与dotnetcore实现图片上传的具体代码,供大家参考,具体内容如下 CKEditor的使用 1.引入js库 <script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js"></script> 2.定义一个textarea标签 <textarea id="editor"> </textarea> 3.用Ck

  • 百度UEditor编辑器使用教程与使用方法(图文)

    我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享一下百度UEditor编辑器使用教程与使用方法,希望对大家有所帮助. 第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://ueditor.baidu.com/web

  • ckeditor syntaxhighlighter代码高亮插件配置分享

    最近由于自己想做一个网站形式的代码库,自已写一个在线文本编辑器,对于现在的我来,确实是很不切实际,呵呵!再说了,现在有一个非常好的在线文本编辑器(ckeditor)了,我和必再去费这等功夫呢!有现成的,拿过用就是的呗!正所谓的拿来主义!不过这个在线文本编辑器,对于我们程序员来说有一个算是缺陷吧!没有代码高亮的功能!这样把代码贴上去,很不好看!今天晚上,我总是把他给弄出来了.当然也采在别人的肩膀上做成的.在此感谢他们的分享!费话不多说了!咱们进入正题吧! 首先去官方网站下载个ckeditor 其次

  • CKEditor中加入syntaxhighlighter代码高亮插件

    从官网 下载ckeditor,我下载的是CKEditor 3.3.1 .CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了.高亮代码用的是"SyntaxHighlighter ". 1.在"ckeditor/plugins/"目录下新建一个"insertcode"目录,然后在"insertcode"目录下新建一个"plugin

  • 免费开源百度编辑器(UEditor)使用方法

    UEditor效果图 一.简介 UEditor是一个开源免费的编辑器,由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码. 官方网站:http://ueditor.baidu.com/ 二.下载地址 官方下载:http://ueditor.baidu.com/website/download.html 官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:    _examples:编辑器完整版的

  • CKEditor 取消转义的两种方法

    话说程序员的博客总是用到SyntaxHighlighter之类的来在pre标签里贴一堆代码.于是因为装了CKEditor for WordPress就一直觉得很讨厌,在HTML标签里写下一些代码,到了Visual里就被转义了.比如>和<就变成了><虾米虾米的.话说今天心血来潮去Google了一下,CKEditor的设置文档里还真的有相关的设置,请围观这里! 配置ckeditor插件目录下的ckeditor.config.js文件,加入下面这行. 复制代码 代码如下: config.

随机推荐