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

1.下载ckeditor文件
下载地址:http://ckeditor.com/download
该网站提供三个版本下载,自行选择。(此处选择标准版)
http://download.cksource.com/CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.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,在页面中添加标签
<%@ taglib uri=”http://ckeditor.com” prefix=”ckeditor” %>
让ckeditor处理文本框(editor1为文本框的id)

/OC/ckeditor/为第二步拷贝的ckeditor文件的目录,OC为自己项目名。
完整jsp代码为:

<%@ 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中的配置如下:

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

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

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

添加Image方法(因为1中指定函数名为Image,Struts通配符)

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();
            }
        }
    }
最后大功告成,下图为页面展示。

你可能感兴趣的:(java,jsp,ckeditor)