ckeditor和ueditor那個(gè)好 CKEditor和UEditor使用比較
更新時(shí)間：2017年03月23日 23:38:50 投稿：mdxy-dxy
本來(lái)項(xiàng)目中使用CKEditor已經(jīng)做好了的富文本編輯器的功能，但是業(yè)務(wù)考慮到美觀性要求換成UEditor，所以就在這里總結(jié)下,需要的朋友可以參考下
CKEditor和UEditor使用比較
本來(lái)項(xiàng)目中使用CKEditor已經(jīng)做好了的富文本編輯器的功能，但是業(yè)務(wù)考慮到美觀性要求換成UEditor，所以就在這里總結(jié)下
先說(shuō)下使用這兩個(gè)不同插件的感想，我用的ueditor是1.4.3的版本：(ueditor API)
UEditor：ueditor更注重用戶體驗(yàn)，而且使用起來(lái)較ckeditor簡(jiǎn)單，但是ueditor在處理前后臺(tái)交互時(shí)相比于ckeditor稍顯麻煩
ckeditor：ckeditor不像ueditor，更多的方法需要自己去實(shí)現(xiàn)，但是畢竟是老牌富文本編輯器，如果之前有寫過(guò)這些方法的話，集成ckeditor個(gè)人覺(jué)得還是比ueditor更方便簡(jiǎn)單。
CKEditor的使用
在jsp頁(yè)面下引入ckeditor下的ckeditor.js（當(dāng)然首先要引入jQuery.js,引入插件類庫(kù)ckeditor-Java-core-3.5.3.jar）
<script type="text/javascript" src="${basePath}/js/ckeditor/ckeditor.js"></script>
//引入js后在textarea標(biāo)簽上添加一個(gè)richText=”true”這個(gè)屬性即可
<textarea name="wxChoiceInfo.infoTextConte" id="wxChoiceInfoInfoTextConte" richText="true" cols="110" rows="15"></textarea>
獲取ckeditor中的內(nèi)容
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");
//對(duì)文件進(jìn)行校驗(yàn)
if(upload==null || uploadContentType==null || uploadFileName==null){
//out.print("<font color=\"red\" size=\"2\">*請(qǐng)選擇上傳文件</font>");
String path = "";
String alt_msg = "*請(qǐng)選擇上傳文件";
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 = "*請(qǐng)選擇圖片文件格式（必須為.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 = "*請(qǐng)選擇上傳"+this.getFileSize()/(1000*1024)+"M以內(nèi)的圖片文件";
out.print("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
+ callback
+ ", '"
+ path
+ "' , '"
+ alt_msg
+ "');</script>");
return null;
}
String imagePath = "";
//imagePath路徑的設(shè)置
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();
}
//將文件保存到項(xiàng)目目錄下
InputStream is = new FileInputStream(upload);
Date date = new Date(); // 獲得系統(tǒng)時(shí)間，用于生成文件名
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();
//設(shè)置返回“圖像”選項(xiàng)卡
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路徑的設(shè)置
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); //擴(kuò)展名
//得到配置文件路徑
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(); //創(chuàng)建輸出流
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>
再來(lái)看UEditor：
//引入相關(guān)的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頁(yè)面部分代碼：
<form action="<s:url value="/p2p/updateIProductServices.action"/>" method="post" id="form">
<tr id="proInvSerTr">
<th>投資服務(wù)流程 <input type="hidden" id="hidInvestProcess" name="productServices.investSerProcess"/></th>
<td>
<!-- 加載編輯器的容器 -->
<script id="container" name="content" type="text/plain">${productServices.investSerProcess}</script>
<!-- 實(shí)例化編輯器 -->
<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();
}
說(shuō)了那么多，那使用ueditor怎么修改文件上次的路勁呢，在1.4.3版本下，找到ueditor\jsp\config.json文件
找到上次圖片配置項(xiàng)的"imageUrlPrefix": "/", /* 圖片訪問(wèn)路徑前綴 */ "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}" //這里是我改過(guò)了的上傳路徑
注意要修改imageUrlPrefix，因?yàn)榫庉嬈髦袌D片顯示路徑是imageUrlPrefix+imagePathFormat，如果不修改imageUrlPrefix圖片是不能正常顯示的，imagePathFormat這個(gè)上傳路徑是相對(duì)于服務(wù)器的相對(duì)路徑。
使用ueditor最主要的就是需要修改web.xml中得struts的過(guò)濾器了，這個(gè)項(xiàng)目的前臺(tái)要求全部使用.html結(jié)尾，如果不修改的話，struts就會(huì)把上傳的靜態(tài)頁(yè)面image.html當(dāng)成action去處理了會(huì)報(bào)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);
}
}
}
有什么問(wèn)題，歡迎各位指正。
相關(guān)文章
syntaxhighlighter 去掉右上角問(wèn)號(hào)圖標(biāo)的三種方法
syntaxhighlighter可以高亮著色顯示幾乎所有語(yǔ)言形式的源代碼，還可以顯示行號(hào)，是一款深受網(wǎng)站建設(shè)人員喜愛的工具，并且它還是免費(fèi)的2013-11-11
Office文檔在線編輯的一個(gè)實(shí)現(xiàn)方法
因?yàn)轫?xiàng)目的關(guān)系，研究了一下Office的在線編輯功能，寫出來(lái)共享一下。2010-06-06
瀏覽器執(zhí)行history.go(-1) FCKeditor編輯框內(nèi)顯示html源代碼的解決方法
使用FCKeditor編輯文章，出于某種原因提交失敗，此時(shí)瀏覽器執(zhí)行返回動(dòng)作，F(xiàn)ckEditor編輯框內(nèi)顯示html代碼。2010-12-12
KindEditor 4.x 在線編輯器常用方法小結(jié)
要修改默認(rèn)后臺(tái)程序處理文件，修改plugins(插件文件夾)下的JavaScript內(nèi)容fileManagerJson改為自己使用程序語(yǔ)言2011-11-11
eWebEditor 請(qǐng)選擇一個(gè)有效的文件的解決方法
解決eWebEditor上傳圖片提示 請(qǐng)選擇一個(gè)有效的文件2010-04-04
FCKEDITOR 的高級(jí)功能和常見問(wèn)題的解決方法
FCKeditor是一個(gè)專門使用在網(wǎng)頁(yè)上屬于開放源代碼的所見即所得文字編輯器。它志于輕量化，不需要太復(fù)雜的安裝步驟即可使用。2010-01-01
前段時(shí)間一直為TP尋找好用的在線編輯器而苦惱，經(jīng)過(guò)多次嘗試與修改后，終于成功地將編輯器集成到Thinkphp里面2012-07-07
Ueditor百度編輯器的Html模式自動(dòng)替換樣式的解決方法
百度的Ueditor編輯器出于安全性考慮，用戶在html模式下粘貼進(jìn)去的html文檔會(huì)自動(dòng)被去除樣式和轉(zhuǎn)義。雖然安全的，但是非常不方便。做一下修改把這個(gè)功能去掉,需要的朋友可以參考下2017-03-03
FCK判斷內(nèi)容是否為空(如果只是去空格，那么這種方式是錯(cuò)誤的)
一般來(lái)說(shuō)，像input里面的值都可以通過(guò)將內(nèi)容去空格判斷是否為空，但是FCK沒(méi)那么簡(jiǎn)單，因?yàn)楫?dāng)你多打幾個(gè)空格或者多打一些回車，它會(huì)自動(dòng)地生成一些<p>標(biāo)簽，如果再用原先去空格判斷的方法，顯然是不可取的。2010-12-12
SyntaxHighlighter 去掉右側(cè)滾動(dòng)條的方法
SyntaxHighlighter這個(gè)是一個(gè)高亮插件?，F(xiàn)在被用于很多網(wǎng)站的代碼顯示。但是SyntaxHighlighter3.0.83，由于自適應(yīng)寬和高，導(dǎo)致一直有滾動(dòng)條的問(wèn)題2020-03-03