java添加Ckeditor编辑器

最新推荐文章于 2025-03-26 12:38:25 发布

转角人生

最新推荐文章于 2025-03-26 12:38:25 发布

阅读量4.7k

点赞数

分类专栏：编辑器

本文链接：https://blog.youkuaiyun.com/xuanzhangran/article/details/68944576

版权

编辑器专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在项目中集成Ckeditor富文本编辑器，并实现图片上传功能。包括下载安装、配置步骤及核心代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：
这里写图片描述
1：添加Ckediter的编辑器js文件下载地址：http://download.youkuaiyun.com/download/xuanzhangran/9933856
2：下载之后解压缩，将文件放在项目的js文件下。

3：代码样式如下：
（1）：在jsp页面引入：<script type="text/javascript" src="<%=basePath%>js/ckeditor/ckeditor.js"></script>
（2）：<!--调用编辑器-->
<script type="text/javascript">
//初始化文本编辑器
    CKEDITOR.replace('contect_text');
</script>


（3）：//需要添加文本编辑器的地方
<!-- 文本编辑器  开始 -->
    <textarea name="content" id="contect_text" class="ckeditor"></textarea> 
 <!-- 文本编辑器  结束-->

（4）：需要变更的地方：

如果编辑器需要上传图片,那么只需要修改：Ckediter中的config.js即可。这里写图片描述

（5）：本案例已经将config.js修改完毕。

（6）：在config.js中有上传图片需要调用后台的代码：我给他封装成了一个工具类。直接复制过去即可。这里写图片描述

    /**
     * @Description: 使用ckeditor上传图片文件并显示  
     *              （该方法只用于文本编辑器图片上传）
     * @author: 
     * @date: 
     * @return:String
     */
@Controller
@RequestMapping("/CkeditorUpload")
public class CkeditorUpload {

    /**
     * 
        * @Title: uploadPicture
        * @Description: Ckeditor 上传图片工具类
        * @param file
        * @param request
        * @param response
        * @throws IOException    参数
        * void   返回类型
        * @throws
     */
    @RequestMapping("/uploadImg.html")
    public void uploadPicture(
            @RequestParam(value="upload",required=false)MultipartFile file,
            HttpServletRequest request,HttpServletResponse response) throws IOException{ 
        response.setCharacterEncoding("utf-8");  
        PrintWriter out = response.getWriter();  

        File targetFile=null;
        String msg="";//返回存储路径
        if (file!=null) {
            String fileName=file.getOriginalFilename();//获取文件名加后缀
            if(fileName!=null&&fileName!=""){   
                String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/upload/imgs/";//存储路径
                String path = request.getSession().getServletContext().getRealPath("upload/imgs"); //文件存储位置
                String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀
                fileName=new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;//新的文件名

                //先判断文件是否存在
                String fileAdd = DateUtil.format(new Date(),"yyyyMMdd");
                File file1 =new File(path+"/"+fileAdd); 
                //如果文件夹不存在则创建    
                if(!file1 .exists()  && !file1 .isDirectory()){       
                    file1 .mkdir();  
                }
                targetFile = new File(file1, fileName);
                try {
                    file.transferTo(targetFile);
                    msg=returnUrl+fileAdd+"/"+fileName;

                     //获取 CKEditor提交的很重要的一个参数  
                    String callback = request.getParameter("CKEditorFuncNum");
                 // 返回“图像”选项卡并显示图片
                    out = response.getWriter();
                    out.println("<script type=\"text/javascript\">");
                    out.println("window.parent.CKEDITOR.tools.callFunction("
                            + callback
                            + ",'"
                            + msg+ "','')"); // 相对路径用于显示图片
                    out.println("</script>");

                } catch (Exception e) {
                    e.printStackTrace();
                }
            }           
        }
    }
}