CKEditor

- 日理万妓 2021-09-11 06:40 292阅读 0赞

开场白：

最近用到了ckeditor网上看了好多大同小异，但是版本都比较老旧了，也许使用过程中有瑕疵，本人

自己总结了下，已经经过实测，方便大家参考，也可以提宝贵意见，互相交流。

正文：

由于Fckeditor只能用于基于ie内核的浏览器，如果要使用于chrome，safi等浏览器，必须要用ckeditor。

我这边对ckeditor的使用以及图片上传做个简单的说明。

（本人用的ckeditor是Version 4.6.2 • 12 Jan 2017  Full Package）  是在struts2框架下用的

先看一下Fckeditor的界面

![Center][]

再看一下ckeditor的界面

![Image 1][]![Center 1][]

通过界面大家也能直观感受到了ckeditor的华丽转身了吧。

下面我们就介绍下怎么使用这个ckeditor

1.首先可以去ckeditor官网下载需要的ckeditor版本http://ckeditor.com/download

2.下载完成后解压，放到你项目的资源目录下，我的是WebRoot目录下。

3.要在你使用ckeditor的jsp界面中加入ckeditor.js 如：  
  
<script type="text/javascript" src="ckeditor\_full/ckeditor.js">

4.在要转换成富文本的textarea下方编写js：CKEDITOR.replace('textarea的name')，如

<textarea name="financial.bz"></textarea>  
   <script type="text/javascript">CKEDITOR.replace('financial.bz');</script>

补充：这里发现了一个比较简单的方法，前提是3要配置。

<textarea id="editor" class="ckeditor"></textarea>(注意，里面的id  class属性值一个都不能错，不能省)

这里还有个好处就是后台用struts2框架获取ckeditor的值，可以设置textarea的name为content具体要看你的action中的对象内容用的什么标签了。

这样就可以把值传递给后台action了。

例如： <textarea name="content" cols="100" id="editor" class="ckeditor" rows="10"></textarea>  这样后台就可以获取到content的值了。

补充：以上方法可以用来替换老的FCKEDITOR 无需改代码，直接用上述例子代码就可以替换，主要name要改成你之前FCKEDITOR的NAME。

代码片段

<html> <head> <script type="text/javascript" src="ckeditor_full/ckeditor.js"></script> </head> <body> <textarea name="editor1"></textarea> <script type="text/javascript">CKEDITOR.replace('editor1');</script>

</body> </html>

以上你的ckeditor就可以展现出来了。

解决图片上传问题

1：上传按钮显示解决

在ckeditor/plugins/image/dialogs/文件中找到，我这里用的是full版本所以改了文件夹名字

\{id:"Upload",hidden:!0,filebrowser:"uploadButton",  然后将hidden:!0  改成hidden:0

（此方法不推荐）

或者在config.js配置文件中加上

config.filebrowserUploadUrl="actions/ckeditorUpload";//待会要上传的action或servlet

![Image 1][]![Image 1][]

2：预览中的英文句子显示解决。

第一种方法：打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image\_previewText”，(b.config.image\_previewText||'')单引号中的内容全删了，注意别删多了。(由于ckeditor的很多js文件都是压缩过的，格式很难看，很容易删错，所以不推荐此种方法)

第二种方法：打开config.js文件，加入下面一句话，注意引号里面一定要有个空格，不能是空字符串。

config.image\_previewText=' '; //预览区域显示内容

![Center 2][]

上传功能实现

上面的只是一个上传页面。也就相当于一个HTML的form表单，要配置点击“上传到服务器上”按钮后请求的Action。可以在ckeditor/config.js中配置。

加入：

config.filebrowserUploadUrl="actions/ckeditorUpload";  用名字空间为actions的写法，目前没有调测通过。

config.filebrowserUploadUrl = "ckeditorUpload.action";  不用名字空间的写法，已经调测通过。

"ckeditorUpload"是请求的URL，也就是点击这个按钮就会post到ckeditorUpload地址进行处理，这里指向的是Struts 2的一个Action。当然，也可以用servlet或者ASP、PHP等来处理请求。

在ckeditor中的config.js中配置

CKEDITOR.editorConfig = function( config ) { config.image_previewText=' '; //预览区域显示内容 config.filebrowserUploadUrl = "ckeditorUpload.action"; };

在struts.xml中配置

不要用名字空间之前试了不好用。这里的包名没有用到切记。

记得要加上CkeditorUpload的类代码：

package action; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.InputStream; import java.io.OutputStream; import java.io.PrintWriter; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; public class CkeditorUpload extends ActionSupport { private File upload; private String uploadContentType; private String uploadFileName; 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 { HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("GBK"); PrintWriter out = response.getWriter(); // CKEditor提交的很重要的一个参数 String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum"); String expandedName = ""; //文件扩展名 if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) { //IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg expandedName = ".jpg"; }else if(uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")){ //IE6上传的png图片的headimageContentType是"image/x-png" expandedName = ".png"; }else if(uploadContentType.equals("image/gif")){ expandedName = ".gif"; }else if(uploadContentType.equals("image/bmp")){ expandedName = ".bmp"; }else{ out.println("<script type=\"text/javascript\">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');"); out.println("</script>"); return null; } if(upload.length() > 600*1024){ out.println("<script type=\"text/javascript\">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件大小不得大于600k');"); out.println("</script>"); return null; } InputStream is = new FileInputStream(upload); String uploadPath = ServletActionContext.getServletContext() .getRealPath("/img/postImg"); String fileName = java.util.UUID.randomUUID().toString(); //采用时间+UUID的方式随即命名 fileName += expandedName; File toFile = new File(uploadPath, 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(); // 返回“图像”选项卡并显示图片 out.println("<script type=\"text/javascript\">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "img/postImg/" + fileName + "','')"); out.println("</script>"); return null; } }

加完之后运行会发现下面的报错那就是说在你的工程下没有img\\postImg这个路径在WebRoot（本人工程的）下面加上这个文件路径，重新clear一下工程，重新运行一下工程会自动重启server。

严重: Servlet.service() for servlet \[default\] in context with path \[/forum\] threw exception \[java.io.FileNotFoundException: J:\\tool\\eclipse\_mars\\workspace\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp1\\wtpwebapps\\forum\\img\\postImg\\8223b424-bd11-41dd-b319-36d4b20e6075.gif (系统找不到指定的路径。)\] with root cause  
java.io.FileNotFoundException: J:\\tool\\eclipse\_mars\\workspace\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp1\\wtpwebapps\\forum\\img\\postImg\\8223b424-bd11-41dd-b319-36d4b20e6075.gif (系统找不到指定的路径。)

使用过程截图

![Center 3][]

![Center 4][]

![Center 5][]

补充下

Struts.xml配置中的包介绍

<package name="itcast" namespace="/test" extends="struts-default"> <action name="helloworld" class="cn.itcast.action.HelloWorldAction" method="execute" > <result name="success">/WEB-INF/page/hello.jsp</result> </action> </package>

在struts2框架中使用包来管理Action，包的作用和java中的类包是非常类似的，它主要用于管理一组业务功能相关的action。在实际应用中，我们应该把一组业务功能相关的Action放在同一个包下。

配置包时必须指定name属性，该name属性值可以任意取名，但必须唯一，他不对应java的类包，如果其他包要继承该包，必须通过该属性进行引用。包的namespace属性用于定义该包的命名空间，命名空间作为访问该包下的Action的路径的一部分，如访问上面例子的Action，访问路径为：/test/helloworld.action。 namespace属性可以不配置，对本例而言，如果不指定该属性，默认的命名空间为“”（空字符串）。

通常每个包都应该继承struts-default包， 因为Struts2很多核心的功能都是拦截器来实现。如：从请求中把请求参数封装到action、文件上传和数据验证等等都是通过拦截器实现的。 struts-default定义了这些拦截器和Result类型。可以这么说：当包继承了struts-default才能使用struts2提供的核心功能。 struts-default包是在struts2-core-2.x.x.jar文件中的struts-default.xml中定义。 struts-default.xml也是Struts2默认配置文件。 Struts2每次都会自动加载 struts-default.xml文件。

注意：包还可以通过abstract=“true”定义为抽象包，抽象包中不能包含action。

[Center]: /images/20210720/87d6bf6628584094917f13b732f86876.png
[Image 1]: 
[Center 1]: /images/20210720/e7d03ab2f4054855840736aa329f623e.png
[Center 2]: /images/20210720/159dfc5568594bf0923e25befaca937e.png
[Center 3]: /images/20210720/c2bf96a8ecf04a58aaadeb5ec20e532b.png
[Center 4]: /images/20210720/66673832691048b5ad998bd5569e5c6b.png
[Center 5]: /images/20210720/3bce37b2006e48f793c3e5d7214d291a.png