ckeditor富文本编辑器使用

CKEditor 是新一代的 FCKeditor，是一个重新开发的版本。CKEditor 是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。

本文使用的github中名为es-ckeditor包含大量功能，包含数学运算...谁用到了更多好用的功能，记得艾特我，我也不会。

效果图:

如何使用：

1.github搜索es-ckeditor下载，这是有大牛搞好的包含一批插件的ckeditor；

2.创建页面引入ckeditor

<!DOCTYPE html>
<html lang="en">
<head>
    <!--一定要先引入一个能用的jquery-->
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
    <script src="../ckeditor/ckeditor.js"></script>
    <style>
        .webuploader-element-invisible{display: none;}
    </style>
</head>
<body>
    <div style="width: 700px;height: 200px;">
        <div id="editor"></div>
    </div>
    <script>
        CKEDITOR.replace( 'editor',
        {
            language : 'zh-cn',
            toolbar: "Detail"//这个配置是config.js中配置好的展现方式的一种
        });
   </script>
</body>

3.ckeditor根目录下的如下函数中加入上传的路径配置：

CKEDITOR.editorConfig = function( config ) {
    ...
    ...
    ...
    //自定义：开启工具栏“图像”中文件上传功能，后面的url为待会要上传action要指向的的action或servlet
    config.filebrowserImageUploadUrl= "/ajax/ckpicupload.htm";
}

4.java代码上传图片，返回链接：

@Controller
@Scope("prototype")
@RequestMapping("/ajax/")
public class AjaxController {
    @RequestMapping("ckpicupload")
    public String uploadfile(HttpServletRequest request, HttpServletResponse response) throws Exception{
        String field="file";
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        //getFiles(a String specifying the parameter name of the multipart file),field是上传组件的name
        List<MultipartFile> filelist=multipartRequest.getFiles(field);
        String picUrl="";
        for(MultipartFile multipartFile:filelist){
            //***此处执行上传到服务器,我这儿就是上传到本地此项目在Tomcat下的根目录中***
            //文件的原始名称
            String originalFilename=multipartFile.getOriginalFilename();
            String newFileName=null;
            if (multipartFile!=null&&originalFilename!=null&&originalFilename.length()>0){
                newFileName= UUID.randomUUID()+originalFilename;
                //存储图片的物理路径
                String pic_path = request.getSession().getServletContext().getRealPath("/upload");
                //如果文件夹不存在则创建
                File file=new File(pic_path);
                if(!file.exists()){
                    System.out.println("file not exists");
                    file.mkdir();
                }
                /**
                 * 获取新文件的File实例,通过spring的org.springframework.web.multipartInterface MultipartFile
                 * 下的transferTo方法,这个可以移动文件的文件系统,复制文件系统中的文件或内存内容保存到目标文件.
                 * 如果目标文件已经存在,它将被删除。
                 */
                picUrl=pic_path+"\\"+newFileName;
                //新文件路径实例
                File targetFile = new File(pic_path, newFileName);
                //内存数据读入磁盘（将接收到的文件传输到给定的目标文件）
                multipartFile.transferTo(targetFile);
            }
        }
        JSONObject json = new JSONObject();
        //此处开发中返回实际生成的地址
        json.put("url","http://chuantu.xyz/t6/741/1614656002x1700340449.png");
        response.getWriter().write(json.toString());
        return null;
    }
}

ckeditor富文本编辑器使用

猜你喜欢