富文本编辑器CKEditor配置及使用

注:使用CKEditor版本为js版本的CKEditor 4.8.0,所有配置均参考自CKEditor官方API:https://docs.ckeditor.com/,以及实践经验

一、快速使用

  • CKEditor官网下载js插件
    进入官网https://ckeditor.com/ckeditor-4/download/点击Release notes选择4.8.0版本点击Download.Zip下载
    备注:目前最新版本4.9.0有bug,所以用4.8.0版本
    富文本编辑器CKEditor配置及使用_第1张图片
    将下载的zip包解压后放入webapp下:
    富文本编辑器CKEditor配置及使用_第2张图片
  • 引入CKEditor的js文件
<script src="ckeditor/ckeditor.js">script>
  • 页面中使用CKEditor

描述:<textarea name="description" id="description"/>textarea>

<script type="text/javascript">
    window.onload = function()
    {
        CKEDITOR.replace( 'description');
    };
script>

具体示例:

  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>title>  
<script src="ckeditor/ckeditor.js">script>
<script type="text/javascript">
    window.onload = function()
    {
        CKEDITOR.replace( 'description');
    };
script>   
head>
<body>
    <form method="post" action="job/add">
        招聘岗位:<input type="text" name="position" id="position"/>
        招聘人数:<input type="text" name="quantity" id="quantity"/>
        学历要求:<input type="text" name="education" id="education"/>
        薪资:<input type="text" name="salary" id="salary"/>
        联系人:<input type="text" name="contact" id="contact"/>
        联系电话:<input type="text" name="telephone" id="telephone"/>
        描述:<textarea name="description" id="description"/>textarea>
        <input type="submit"/>
    form>
body>
html>

引入后效果如下:
富文本编辑器CKEditor配置及使用_第3张图片

  • 后台获取编辑器的值
    后台通过获取textarea的值获取编辑器的值,springMVC取值如下:
@RequestMapping(value = "/add", method = RequestMethod.POST)
public Result add(Job job){......}

二、图片上传

  • 清空图像预览框中的文字
    富文本编辑器CKEditor配置及使用_第4张图片

    ckeditor文件夹下的config.js中添加:

config.image_previewText=' ';

添加后效果如下:
富文本编辑器CKEditor配置及使用_第5张图片

  • 配置上传图片请求地址
    ckeditor文件夹下的config.js中添加:
config.filebrowserUploadUrl="file/uploadImage";
  • 上传照片预览
    图片上传成功,在目录下也可以看到图片,至此图片上传成功。但是如何将图片发到编辑器中呢?点“确定”按钮会有以下提示。
    富文本编辑器CKEditor配置及使用_第6张图片
    到这里,要在controller中返回一段JS脚本:
out.println("");   

有了这段代码,图片上传成功后,根据这里的
“upload/” + filename
相对地址,就可以使用这个图片,直接转到“图像”页面。
富文本编辑器CKEditor配置及使用_第7张图片
点击确定后编辑器如下:
富文本编辑器CKEditor配置及使用_第8张图片

  • 上传的图片重新显示到页面
    直接将值写在标签中:
method="post" action="job/add"> 招聘岗位:type="text" name="position" id="position" value='${job.position}'/> 招聘人数:type="text" name="quantity" id="quantity" value='${job.quantity}' /> 学历要求:type="text" name="education" id="education" value='${job.education}'/> 薪资:type="text" name="salary" id="salary" value='${job.salary}'/> 联系人:type="text" name="contact" id="contact" value='${job.contact}'/> 联系电话:type="text" name="telephone" id="telephone" value='${job.telephone}'/> 描述: type="submit"/>
  • 后台上传图片代码
/**
     * 富文本编辑器图片上传
     * @param file
     * @return
     */
    @RequestMapping(value = "/uploadImage", method = RequestMethod.POST)
    public void uploadImage(@RequestParam("upload")MultipartFile[] file)
    {
        response.setCharacterEncoding("UTF-8"); 
        PrintWriter out=null; 
       // CKEditor提交的很重要的一个参数 ,回调函数的序号
        String callback = this.request.getParameter("CKEditorFuncNum");
        try { 
         out = response.getWriter(); 
        } catch (IOException e1) { 
         logger.error("response.getWriter()异常="+e1); 
         e1.printStackTrace(); 
        } 
        FileInfo fileInfo = null;
        //上传目录地址
        String uploadDir = this.session.getServletContext().getRealPath("/") + "upload/";
        //如果目录不存在,自动创建文件夹
        File dir = new File(uploadDir);
        if (!dir.exists())
        {
            dir.mkdir();
        }
        try
        {
            for (int i = 0; i < file.length; i++)
            {
                if (null != file[i])
                {
                    fileInfo=executeUpload(uploadDir, file[i]);
                    fileInfo.setId(IdGen.uuid());
                    fileInfo.setCreateDt(DateUtil.getNowDate());
                    fileInfo.setCreateBy(this.getLoginUser().getId());
                    fileInfo.setUpdateBy(this.getLoginUser().getId());
                    fileInfo.setUpdateDt(this.getLoginUser().getId());
                    fileService.add(fileInfo);
                 // 返回"图像"选项卡并显示图片  request.getContextPath()为web项目名   
                    out.println("");   

                }
            }
        }
        catch (IOException e)
        {
            out.println("");  
        }
}

三、难点总结

  • 上传图片传到后台的参数CKEditorFuncNum为空
// CKEditor提交的很重要的一个参数 ,回调函数的序号
String callback = this.request.getParameter("CKEditorFuncNum");

将CKEditor版本由CKEditor 4.9.0换成CKEditor 4.8.0解决问题

  • 上传图片传到后台的参数MultipartFile[]为空
    添加参数注解@RequestParam(“upload”)后解决,代码如下:
public void uploadImage(@RequestParam("upload")MultipartFile[] file)
  • 保存到数据库的编辑器的内容中的图片无法在页面显示
    编辑器中的图片是上传到了应用服务器的/upload目录下,编辑器中关于图片的链接信息保存到了数据库中DESCRIPTION字段中,如下:
    富文本编辑器CKEditor配置及使用_第9张图片
    在页面上直接将值写在标签中:
method="post" action="job/add"> 招聘岗位:type="text" name="position" id="position" value='${job.position}'/> 招聘人数:type="text" name="quantity" id="quantity" value='${job.quantity}' /> 学历要求:type="text" name="education" id="education" value='${job.education}'/> 薪资:type="text" name="salary" id="salary" value='${job.salary}'/> 联系人:type="text" name="contact" id="contact" value='${job.contact}'/> 联系电话:type="text" name="telephone" id="telephone" value='${job.telephone}'/> 描述: type="submit"/>

你可能感兴趣的:(前端开发)