ckedit4.1使用记录

2019-04-11 16:54:47 阅读：242 来源： 互联网

标签：name 记录 File imageUrl ckedit4.1 groups 使用 config String

config.js:

/**
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function (config) {
    config.language = 'zh-cn';
    config.uiColor = '#d1e9f3';
    config.toolbarCanCollapse = true;
    config.toolbarGroups = [
        {name: 'document', groups: ['mode', 'document', 'doctools']},
        {name: 'clipboard', groups: ['clipboard', 'undo']},
        {name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing']},
        {name: 'forms', groups: ['forms']},
        {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
        {name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph']},
        {name: 'links', groups: ['links']},
        {name: 'insert', groups: ['insert']},
        {name: 'styles', groups: ['styles']},
        {name: 'colors', groups: ['colors']},
        {name: 'tools', groups: ['tools']},
        {name: 'others', groups: ['others']},
        {name: 'about', groups: ['about']}
    ];
// 图片上传配置
    config.image_previewText = ' ';/*去掉图片预览框的文字*/
    /*开启工具栏“图像”中文件上传功能，后面的url为图片上传要指向的的action或servlet*/
    // config.filebrowserUploadUrl = '/sysfile/ckupload?type=File';
    config.filebrowserImageUploadUrl = '/sysfile/ckupload?type=Image';
    // config.filebrowserFlashUploadUrl = '/sysfile/ckupload?type=Flash';
    // 图片浏览配置
    //config.filebrowserImageBrowseUrl = 'browerServer.do?type=image';

    config.removeButtons = 'Source,Save,NewPage,Print,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Iframe,PageBreak,Flash,About,Language';
};

文件上传类:

   @RequestMapping(value = "/sysfile/ckupload", method = RequestMethod.POST)
    public void upload(@RequestParam(value = "upload", required = false) MultipartFile files) {
        PrintWriter out = null;
        String originalFilename = files.getOriginalFilename();
        String fileType = originalFilename.substring(originalFilename.lastIndexOf(".",originalFilename.length()));
        String imageUrl = "ckupload";
        String msg = "";
        String fileName = "";
        String strFilePath = "";
        boolean isComplete = false;
        JSONObject result = new JSONObject();
        try {
            String filePrefixFormat = "yyyyMMddHHmmssS";
//            String date = "";
            String date = sysUserInfo.getUserId();
//            String date = DateUtil.format(new Date(), filePrefixFormat);
//            File path = new File(ResourceUtils.getURL("classpath:").getPath());
//            if(!path.exists()) path = new File("");
//            File upload = new File(path.getAbsolutePath(),imageUrl);

//            File upload = new File(serverPath+imageUrl);
//            if(!upload.exists()) upload.mkdirs();

            strFilePath = ckfilepath+imageUrl+File.separator+date+File.separator;
            File filePath = new File(strFilePath);
            if(!filePath.exists()) filePath.mkdirs();

            fileName = UUID.randomUUID().toString()+fileType;
            String savedName = strFilePath + File.separator + fileName;

//            files.transferTo(new File(savedName));
            isComplete = FileUtil.copyInputStreamToFile(files.getInputStream(), new File(savedName));
            if (isComplete==true){
                out = response.getWriter();
                imageUrl = imageUrl+File.separator+date+File.separator+fileName;
                imageUrl = imageUrl.replace("\\","/");
                imageUrl = imageUrl.replace("\\\\","/");
            }
        } catch (Exception e) {
            e.printStackTrace();
            logger.error("富文本编辑器上传图片时发生异常", e);
            msg = "服务器异常";
        } finally {
            if (!StrUtil.isBlank(msg)) {
                //上传失败
                result.put("uploaded", 0);
                JSONObject errorObj = new JSONObject();
                errorObj.put("message", msg);
                result.put("error", errorObj);
            } else {
                System.out.println(isComplete);
                //上传成功
                result.put("uploaded", 1);
//                result.put("fileName", "a.jpg");
                result.put("fileName", fileName);
//                result.put("url", "/upload/a.jpg");
                result.put("url", File.separator+imageUrl);
            }
            out.println(result.toJSONString());
        }
    }

页面添加点击事件

// var editor = CKEDITOR.replace("content", {"toolbar": "Basic"}); //显示编辑器
// editor.on('change', function (event) {

上传word文档:

1.image.js

var fun = eval("ckimagesuccessfun");
if (fun) {
    fun.call(this);
}

页面添加:

function ckimagesuccessfun() {
    console.log("xxxxxxxxxxxxx");
    var editor = CKEDITOR.instances.content; //显示编辑器
    var str = editor.getData(); //获取editor中的内容
    $("#container").append(str);
    $("#container img").each(function (i, val) {
        var srcVal = $(this).attr("src");
        if (srcVal.indexOf("docx") >= 0) {
            var altVal = $(this).attr("alt");
            var hmtlA = "<a href='" + srcVal + "'>" + altVal + "</a>";
            $(this).after(hmtlA);
            $(this).remove();
        }
    });
    editor.setData($("#container").html());
    $("#container").html("");
}

只做了docx,具体可以根据实际情况进行修改.

标签：name,记录,File,imageUrl,ckedit4.1,groups,使用,config,String
来源： https://blog.csdn.net/mlc19860417/article/details/89213867

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ckedit4.1使用记录