使用struts2完成ckeditor和圖片上傳

代碼地址以下：
http://www.demodashi.com/demo/12427.html

使用struts2完成ckeditor和ckeditor圖片上傳

ckeditor版本ckeditor_4.8.0_full
struts2版本struts2.5

• 解壓壓縮包，將解壓後的文件夾ckeditor直接拷貝至WebContent下
• 在jsp中引用ckeditor.js

<script type="text/javascript" src="${pageContext.request.contextPath }/js/ckeditor/ckeditor.js"></script>

• 在文本域textarea下方編寫以下js代碼

<script type="text/javascript">CKEDITOR.replace("editor");</script>

注意:replace中寫的是textarea的name名稱

• 完整代碼:

• 在demo.action中設置屬性，名稱爲editor,提供getter和setter方法
• 在struts.xml中配置好action

<action name="demo" class="demo.DemoAction" method="demo">
    <result>/result.jsp</result>
</action>

• 啓動服務器查看效果:

在jsp頁面中能夠沒必要寫提交按鈕，上方有一個保存，效果相同，須要使用editor full版本，該版本相較於標準版本功能更多。
點擊保存便可在result.jsp界面中查看，後臺打印是html樣式。

解決圖片上傳

• 上傳按鈕顯示解決(默認是沒有圖片上傳的)

在editor文件夾目錄下的config.js中添加以下代碼:

config.filebrowserUploadUrl="ckeditorUpload.action";
//url地址爲一會上傳至服務器執行的action

• 圖片預覽中英文解決

在editor文件夾目錄下的config.js中添加以下代碼:

config.image_previewText=' ';

• 效果

• 實現上傳功能

上面的只是一個上傳頁面。也就至關於一個HTML的form表單，要配置點擊「上傳到服務器上」按鈕後請求的Action。能夠在ckeditor/config.js中配置。該表單的上傳標籤的name爲upload。
在config.js中添加以下代碼:

config.filebrowserUploadUrl="ckeditorUpload.action";
//url地址爲一會上傳至服務器執行的action

該行代碼其實在上傳按鈕顯示時就已經配置過。

• struts.xml中代碼:

<action name="ckeditorUpload" class="demo.DemoAction" method="upload">
</action>

• 文件上傳代碼，思路與struts文件上傳相同，只須要加上幾句便可，代碼以下:

private File upload;    //editor默認的上傳表單的標籤名爲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 upload() throws Exception{

        HttpServletResponse response = ServletActionContext.getResponse();    
        response.setCharacterEncoding("GBK");    
        PrintWriter out = response.getWriter();  

        String realPath=ServletActionContext.getServletContext().getRealPath("/images");
        File file = new File(realPath);

        // CKEditor提交的很重要的一個參數    
        String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum"); 
        //request.put("callback", callback);

        FileOutputStream fout=
                new FileOutputStream(new File(file,getUploadFileName()));

        FileInputStream in=new FileInputStream(getUpload());

        byte[] buffer=new byte[1024];
        int len=0;
        while((len=in.read(buffer))>0)
            fout.write(buffer,0,len);
        //返回「圖像」選項卡，並顯示預覽圖片
        //必定要在流關閉以前寫下面三句話，不然圖片顯示不出來，也不報錯
        out.println("<script type=\"text/javascript\">");    
        out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + ServletActionContext.getRequest().getContextPath() + "/images/" + uploadFileName + "','')");    
        out.println("</script>");

        out.close();
        in.close();

        return SUCCESS;
    }

• 效果截圖:

• 點擊上傳到服務器，自動跳轉至圖像信息選項卡，並顯示預覽圖片

• 點擊肯定:

• 點擊保存，便可在result.jsp頁面中查看:

• 控制檯打印文本域中的信息:

項目結構

使用struts2完成ckeditor和圖片上傳

代碼地址以下：
http://www.demodashi.com/demo/12427.html

注：本文著做權歸做者，由demo大師代發，拒絕轉載，轉載須要做者受權