Jsp中如何使用Ckeditor富文本编译器以及实现上传文件的功能

1.下载ckeditor文件下载地址：http://ckeditor.com/download 该网站提供三个版本下载，自行选择。（此处选择标准版） http://download.cksource.com/CKEditor/CKEditor for Java/CKEditor for Java 3.6.6.2/ckeditor-java-3.6.6.2.war 这是当前版本的样例，可以直接将其放在tomcat下的webapps文件夹中，重启tomcat即可自动解压该文件。 2.拷贝相关文件找到解压后的文件，**将web-inf中lib下的jar包添加到自己工程的lib下，导入。将ckeditor文件夹拷贝到自己项目的webroot下。** 3.引用ckeditor 新建test.jsp，在页面中添加标签

代码语言：javascript复制


 <%@ taglib uri=”http://ckeditor.com” prefix=”ckeditor” %>

让ckeditor处理文本框（editor1为文本框的id） /OC/ckeditor/为第二步拷贝的ckeditor文件的目录，OC为自己项目名。完整jsp代码为：

代码语言：javascript复制

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'test.jsp' starting page</title>
  </head>
  <body>
  <%
String content=request.getParameter("editor1");
if(content!=null&&!content.equals("")){
out.println(content);
}
%>//提交到当前页面，为了验证输入信息
<form name="testForm" method="post" action="/OC/admin/add.jsp">
    <p>
                <label for="editor1">Editor 1:</label>
                <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
            </p>
            <p>
                <input type="submit" value="Submit" />
            </p>
            **<ckeditor:replace replace="editor1" basePath="/OC/ckeditor/" />**
            </form>
  </body>
</html>

扩展：如何实现上传文件的功能（此处以图片为例） 1.添加处理类打开keditor文件夹中的config.js文件在CKEDITOR.editorConfig = function( config ) 函数中添加处理类链接 // 图片 config.filebrowserImageUploadUrl = ‘UploadAction-Image’;此处使用Struts2的文件上传实现，故使用Action处理。 Struts.xml中的配置如下：

代码语言：javascript复制

 <action name="UploadAction-*" class="com.oc.action.UploadAction" method="{1}">
      </action>

2.上传图片类的实现定义三个成员变量，并且生成set方法，Struts2会进行自动赋值

代码语言：javascript复制

    private File upload;
    private String uploadFileName;
    private String uploadContentType;

添加Image方法（因为1中指定函数名为Image，Struts通配符）

代码语言：javascript复制

public void Image() throws IOException{
        String filePath =ReadStrutsProp.struts_multipart_news_saveDir;
        //此处为读取配置信息，即为 /UploadFile
        String targetDirectory = ServletActionContext.getRequest().getRealPath("/" filePath);
        String fileName = null;
        if(uploadFileName!=null){
             fileName = UUID.randomUUID().toString().replace("-","") uploadFileName.substring(uploadFileName.lastIndexOf("."));
             //为避免重复使用uuid保存新的文件名，截取源文件类型
             System.out.println(fileName);
             File target = new File(targetDirectory,fileName);
             response.setHeader("Content-type", "text/html;charset=UTF-8"); 
             PrintWriter out = response.getWriter();
             try {
                **FileUtils.copyFile(upload,target);
                // 组装返回url，以便于ckeditor定位图片
                String fileUrl = filePath   "/"   fileName;
                fileUrl = request.getContextPath()   fileUrl;
                // 将上传的图片的url返回给ckeditor
                String callback = request.getParameter("CKEditorFuncNum");
                out.println("<script type="text/javascript">");
                out.println("window.parent.CKEDITOR.tools.callFunction("
                          callback   ",'"   fileUrl   "',''"   ")");
                out.println("</script>");**
            } catch (IOException e) {
                    out.flush();
                    out.println("<script>alert('上传图片失败,请刷新重试！');</script>");
                e.printStackTrace();
            }finally{
                out.flush();
                out.close();
            }
        }
    }

代码语言：javascript复制

最后大功告成，下图为页面展示。

struts tomcat http 网站

0 人点赞