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

最新推荐文章于 2024-03-11 22:19:01 发布

sinat_31986807

最新推荐文章于 2024-03-11 22:19:01 发布

阅读量8.1w

点赞数 16

分类专栏： # ------【前端开发篇】

本文链接：https://blog.csdn.net/sinat_31986807/article/details/79667543

版权

------【前端开发篇】专栏收录该内容

6 篇文章 0 订阅

订阅专栏

注：使用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版本

将下载的zip包解压后放入webapp下：
引入CKEditor的js文件

<script src="ckeditor/ckeditor.js"></script>

页面中使用CKEditor

<!--在需要使用编辑器的地方插入textarea标签 -->
描述：<textarea name="description" id="description"/></textarea>
<!--将相应的控件替换成编辑器代码 -->
<script type="text/javascript">
    window.onload = function()
    {
        CKEDITOR.replace( 'description');
    };
</script>

具体示例：

<!DOCTYPE html>  
<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>

引入后效果如下：
这里写图片描述

后台获取编辑器的值
后台通过获取textarea的值获取编辑器的值，springMVC取值如下：

@RequestMapping(value = "/add", method = RequestMethod.POST)
public Result add(Job job){......}

二、图片上传

清空图像预览框中的文字

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

config.image_previewText=' ';

添加后效果如下：
这里写图片描述

配置上传图片请求地址
ckeditor文件夹下的config.js中添加：

config.filebrowserUploadUrl="file/uploadImage";

上传照片预览
图片上传成功，在目录下也可以看到图片，至此图片上传成功。但是如何将图片发到编辑器中呢？点“确定”按钮会有以下提示。

到这里，要在controller中返回一段JS脚本：

out.println("<script type=\"text/javascript\">");  
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
 + ",'" + this.request.getContextPath() + "/upload/" + fileInfo.getRename() + "','')");  
out.println("</script>");

有了这段代码，图片上传成功后，根据这里的
“upload/” + filename
相对地址，就可以使用这个图片，直接转到“图像”页面。
这里写图片描述
点击确定后编辑器如下：

上传的图片重新显示到页面
直接将值写在标签中：

<form method="post" action="job/add">
        招聘岗位：<input type="text" name="position" id="position" value='${job.position}'/>
        招聘人数：<input type="text" name="quantity" id="quantity" value='${job.quantity}' />
        学历要求：<input type="text" name="education" id="education" value='${job.education}'/>
        薪资：<input type="text" name="salary" id="salary" value='${job.salary}'/>
        联系人：<input type="text" name="contact" id="contact" value='${job.contact}'/>
        联系电话：<input type="text" name="telephone" id="telephone" value='${job.telephone}'/>
        描述：<textarea name="description" id="description"/>${job.description}</textarea>
        <input type="submit"/>
    </form>

后台上传图片代码

/**
     * 富文本编辑器图片上传
     * @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("<script type=\"text/javascript\">");  
                    out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                            + ",'" + this.request.getContextPath() + "/upload/" + fileInfo.getRename() + "','')");  
                    out.println("</script>");   

                }
            }
        }
        catch (IOException e)
        {
            out.println("<script type=\"text/javascript\">");    
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件上传失败！');");   
            out.println("</script>");  
        }
}

三、难点总结

上传图片传到后台的参数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字段中，如下：

在页面上直接将值写在标签中：

<form method="post" action="job/add">
    招聘岗位：<input type="text" name="position" id="position" value='${job.position}'/>
    招聘人数：<input type="text" name="quantity" id="quantity" value='${job.quantity}' />
    学历要求：<input type="text" name="education" id="education" value='${job.education}'/>
    薪资：<input type="text" name="salary" id="salary" value='${job.salary}'/>
    联系人：<input type="text" name="contact" id="contact" value='${job.contact}'/>
    联系电话：<input type="text" name="telephone" id="telephone" value='${job.telephone}'/>
    描述：<textarea name="description" id="description"/>${job.description}</textarea>
    <input type="submit"/>
</form>

sinat_31986807

关注

16
点赞
踩
125

收藏

觉得还不错? 一键收藏
11
评论
富文本编辑器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...
复制链接

扫一扫