ckeditor富文本編輯器

ckeditor富文本編輯器的具體使用步驟如下:

1.頁面中引入js

2.寫存放ckeditor的富文本框

<div class="layui-form-item">
	<label class="layui-form-label">内容：</label>
	<div class="layui-input-block" style="width: 826px;">
		<textarea id="content" rows="10" cols="30" class="ckeditor" name="content" ></textarea>
	</div>
</div>
           

3.擷取富文本框值的方式

4.修改頁面中給富文本框指派的方式

定義一個接口：根據id去查詢富文本框中的内容，然後把查詢到的内容指派給富文本框即可。

$(function(){
	$("#content").val(getKnDetail());
})
			
function getKnDetail(){
		    var content;
            $.ajax({
                type:'post',
                url:'getKnowLedgeDe',
                data:{knId:getUrlParam("knId")},
                dataType:'json',
                async:false,
                success:function (data) {
                    console.log(data)
					content=data[0].content;
                }
            })
			return content;
}
           

5.富文本編輯器圖檔上傳功能

(1)在ckeditor檔案下的config.js中配置需要調用的圖檔上傳接口。

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.filebrowserImageUploadUrl = "../hnxf-video/ckeditorUpload1";
};
           

(2)開發圖檔上傳工具類以及接口。

工具類FileUtil

package com.hnxf.video.hunanxfv.util;

import com.hnxf.video.hunanxfv.Service.FireMiniService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;
import java.util.regex.Pattern;




public class FireUtil {
    @Autowired
    private FireMiniService fireMiniService;

    public static String getFileType(String filename){
        if(filename.endsWith(".jpg") || filename.endsWith(".jepg")){
            return ".jpg";
        }else if(filename.endsWith(".png") || filename.endsWith(".PNG")){
            return ".png";
        }else if(filename.endsWith(".mp4") ) {
            return ".mp4";
        }else if(filename.endsWith(".mp3") ) {
            return ".mp3";
        }else{
            return "application/octet-stream";
        }
    }

    /*
     * 判斷是否為整數
     * @param str 傳入的字元串
     * @return 是整數傳回true,否則傳回false
     */
    public static boolean isInteger(String str) {
        Pattern pattern = Pattern.compile("^[-\\+]?[\\d]*$");
        return pattern.matcher(str).matches();
    }


    private static List<String> fileTypes = new ArrayList<String>();

    static {
        fileTypes.add(".jpg");
        fileTypes.add(".jpeg");
        fileTypes.add(".bmp");
        fileTypes.add(".gif");
        fileTypes.add(".png");
    }
    /**
     * 圖檔上傳
     *
     */
    public static String upload(HttpServletRequest request, String DirectoryName) throws IllegalStateException,
            IOException {
        // 建立一個通用的多部分解析器
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        // 圖檔名稱
        String fileName = null;
        // 判斷 request 是否有檔案上傳,即多部分請求
        if (multipartResolver.isMultipart(request)) {
            // 轉換成多部分request
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            // 取得request中的所有檔案名
            Iterator<String> iter = multiRequest.getFileNames();
            while (iter.hasNext()) {
                // 取得上傳檔案
                MultipartFile file = multiRequest.getFile(iter.next());
                if (file != null) {
                    // 取得目前上傳檔案的檔案名稱
                    String myFileName = file.getOriginalFilename();
                    // 如果名稱不為“”,說明該檔案存在，否則說明該檔案不存在
                    if (myFileName.trim() != "") {
                        // 獲得圖檔的原始名稱
                        String originalFilename = file.getOriginalFilename();
                        // 獲得圖檔字尾名稱,如果字尾不為圖檔格式，則不上傳
                        String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
                        if (!fileTypes.contains(suffix)) {
                            continue;
                        }
                        // 如果路徑不存在，則建立該路徑
//                        File realPathDirectory = new File(realPath);
//                        if (realPathDirectory == null || !realPathDirectory.exists()) {
//                            realPathDirectory.mkdirs();
//                        }
                        // 重命名上傳後的檔案名 111112323.jpg
                        fileName = UUID.randomUUID().toString() + suffix;
                        // 獲得上傳路徑的絕對路徑位址(/upload)-->
                        String realPath="/home/picture/images/firemini/" + fileName;
                        System.out.println(realPath);
                        // 定義上傳路徑 .../upload/111112323.jpg
                        File uploadFile = new File(realPath);
                        System.out.println(uploadFile);
                        file.transferTo(uploadFile);
                    }
                }
            }
        }
        return fileName;
    }

    // ckeditor檔案上傳功能，回調，傳回圖檔路徑，實作預覽效果。
    public static void ckeditor(HttpServletRequest request, HttpServletResponse response, String DirectoryName) throws IOException {
        String fileName = upload(request, DirectoryName);
        // 結合ckeditor功能
        // imageContextPath為圖檔在伺服器位址，如upload/123.jpg,非絕對路徑
        String imageContextPath = "https://119hunan.top/images/firemini/" + fileName;
        response.setContentType("text/html;charset=UTF-8");
        String callback = request.getParameter("CKEditorFuncNum");
        PrintWriter out = response.getWriter();
        out.println("<script type=\"text/javascript\">");
        out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + imageContextPath + "',''" + ")");
        out.println("</script>");
        out.flush();
        out.close();
    }
}

           

接口

//上傳圖檔
    @RequestMapping("/ckeditorUpload1")
    public void ckeditorUpload(HttpServletRequest request, HttpServletResponse response) throws Exception {
        FileUtil.ckeditor(request, response, "");
    }