KindEditor上传图片和修改图片

1.首先就是下载KindEditor（这里是官网的地址）
2. 部署编辑器
解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/

Note
您可以根据需求删除以下目录后上传到服务器。
asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

3 修改HTML页面
在需要显示编辑器的位置添加textarea输入框。

 <textarea id="describe" name="describe" style="width:100%;"></textarea>

Note
id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用 编辑器初始化参数 设置。

4在该HTML页面添加以下脚本。

 <link rel="stylesheet" href="<%=path%>/js/kindeditor-master/themes/default/default.css" />
      <script charset="utf-8" src="<%=path%>/js/kindeditor-master/kindeditor-all-min.js"></script>
      <script charset="utf-8" src="<%=path%>/js/kindeditor-master/lang/zh-CN.js"></script>

具体的地址更具地址的路径来
5 初始化

 var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="describe"]', {
            minHeight:'350px',
            allowFileManager : true,
            uploadJson : '<%=path%>/tIg/uploadOK',
            afterUpload: function(){this.sync();}, //图片上传后，将上传内容同步到textarea中
            afterBlur: function(){this.sync();},   ////失去焦点时，将上传内容同步到textarea中
        })

    });

编辑器的内容是可以自己选择的，根据自己的十几需求来，我就是全部需求，不做修改，这里不多做解释

[
‘source’, ‘|’, ‘undo’, ‘redo’, ‘|’, ‘preview’, ‘print’, ‘template’, ‘code’, ‘cut’, ‘copy’, ‘paste’,
‘plainpaste’, ‘wordpaste’, ‘|’, ‘justifyleft’, ‘justifycenter’, ‘justifyright’,
‘justifyfull’, ‘insertorderedlist’, ‘insertunorderedlist’, ‘indent’, ‘outdent’, ‘subscript’,
‘superscript’, ‘clearhtml’, ‘quickformat’, ‘selectall’, ‘|’, ‘fullscreen’, ‘/’,
‘formatblock’, ‘fontname’, ‘fontsize’, ‘|’, ‘forecolor’, ‘hilitecolor’, ‘bold’,
‘italic’, ‘underline’, ‘strikethrough’, ‘lineheight’, ‘removeformat’, ‘|’, ‘image’, ‘multiimage’,
‘flash’, ‘media’, ‘insertfile’, ‘table’, ‘hr’, ‘emoticons’, ‘baidumap’, ‘pagebreak’,
‘anchor’, ‘link’, ‘unlink’, ‘|’, ‘about’
]

6上传图片

 var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="describe"]', {
            minHeight:'350px',
            allowFileManager : true,
            uploadJson : '<%=path%>/tIg/uploadOK',
            afterUpload: function(){this.sync();}, //图片上传后，将上传内容同步到textarea中
            afterBlur: function(){this.sync();},   ////失去焦点时，将上传内容同步到textarea中
        })

    });

uploadJson 后面就是你在后台处理的地址

@RequestMapping(value="uploadOK")
    public @ResponseBody String uploadOK(@RequestParam("imgFile") CommonsMultipartFile[] files, HttpServletRequest request, Map<String, Object> model, HttpServletResponse response){
        JSONObject jb=new JSONObject();
        jb.put("error", 0);
        //文件保存目录路径

        //定义允许上传的文件扩展名
        HashMap<String, String> extMap = new HashMap<String, String>();
        extMap.put("image", "gif,jpg,jpeg,png,bmp");
        extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
        extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");

        //最大文件大小
        long maxSize = 1024 * 1024 *2;
        if(!ServletFileUpload.isMultipartContent(request)){
            jb.put("error", 1);
            jb.put("message", "请选择文件");
            return jb.toJSONString();
        }
        String dirName  =request.getParameter("dir");
        if (dirName == null) {
            dirName = "image";
        }
        if(!extMap.containsKey(dirName)){
            jb.put("error", 1);
            jb.put("message", "目录名不正确");
            return jb.toJSONString();
        }
        try {

            if (files!=null&&files.length>0) {
                for (CommonsMultipartFile commonsMultipartFile : files) {
                    Map upload = mySftp.upload(commonsMultipartFile);
                    jb.put("error", 0);
                    jb.put("message", "上传成功！");
                    jb.put("url",返回的一定要是绝对的路径);
                    return jb.toJSONString();
                }
            }
        } catch (Exception e1) {
            jb.put("error", 1);
            jb.put("message", e1.getMessage());
            return jb.toJSONString();
        }
        return jb.toJSONString();
    }

切记返回的一定会是图片的绝对路劲 不然是编辑器里面是显示不出来的 应为他找不到图片在哪里
使用的是sftp上传 贴出代码

    public Map upload(MultipartFile oldFile) {
        Map<String, String> map = new HashMap<String, String>();
    // 验证是否登陆成功
         if (!connectLogin()) {
             logger.info("sftp服务器登录失败！");
             map.put("info", "sftp服务器登录失败！");
             return map;
         }
        String oldName = oldFile.getOriginalFilename();
        String type = oldName.substring(oldName.lastIndexOf(".") + 1);// 获取后缀名
        if (oldFile != null) {
            if (type != null) {
                if (("GIF".equals(type.toUpperCase()) || "PNG".equals(type.toUpperCase())
                        || "JPG".equals(type.toUpperCase()) || "JPEG".equals(type.toUpperCase()))) {
                    String trueName = System.currentTimeMillis()
                            + Math.random() * 10 + "." + type; // 随机数作为名称
                    File file = new File(trueName);
                    try {
                        sftp.cd(ftpConfig.getFtpPath());
                        InputStream inputStream = oldFile.getInputStream();
                        sftp.put(inputStream, file.getName());
                        map.put("path", trueName);
                        map.put("info", "图片添加成功");
                        return map;

                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            } else {
                map.put("info", "格式不正确");
                return map;
            }
        } else {
            map.put("info", "文件夹为空！！！");
            return map;
        }

        return null;
    }

ok 上传就可以了

然后是整个form表单的提交，使用的是FormData

  $scope.processForm = function(){
            var flag = $("#myForm").valid();
            var formData = new FormData($("#myForm" )[0]);
            if(flag){
                $.ajax({
                    url: '<%=path%>/tIg/tIg_add?oper=1' ,
                    type: 'POST',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        var info =  $.parseJSON(data);
                        var msg = info.msg;
                        if(msg == "true"){
                            var curId = window.parent.document.getElementById("curId").value;
                            var listWin = window.parent.document.getElementById("iframe"+curId);
                            var scope = listWin.contentWindow.angular.element('#Job_list').scope();
                            scope.searchList();
                            top.layer.alert(info.msgInfo, {icon: 6});
                            $("#btnmysave").addClass(" disabled");
                            $("#btnmysave").attr("disabled","disabled");
                            $scope.myreadonly = true;
                            $scope.myreadonly = true;
                        }else{
                            top.layer.alert(info.msgInfo, {icon: 6});
                        }
                    }
                });
            }
        }

后台正常的接受就是了 ，编辑器里面的图片都会换成img 标签存放在数据库，下面就是一个样本

<img src="http://api.map.baidu.com/staticimage?center=121.473704%2C31.230393&zoom=11&width=558&height=360&markers=121.473704%2C31.230393&markerStyles=l%2CA" alt="" /><img src="http://localhost:8080/js/kindeditor-master/plugins/emoticons/images/10.gif" border="0" alt="" /><img src="http://localhost:8080/js/kindeditor-master/plugins/emoticons/images/13.gif" border="0" alt="" />3333333333333333333333333333333

最后就是修改页面的照片显示问题了，有的是可以直接显示但是有的因为页面加载的问题不可以显示出来，请先确实页面是否可以取到值，确认可以但是编辑器拿不到值的话 可以这样是试一下（初始化文本编辑器和之前的一样复制过来就可以了）

$scope.url = "<%=path%>/tIg/tIg_edit?oper=1&id="+$scope.id;
    $http.post($scope.url).success(function(data){
        var msg = data.msg;
        if(msg == "true"){
            $scope.tIg = data.record;
            $scope.tts = data.tIgts;
// 设置HTML内容
            editor.html($scope.tIg.describe);
        }else if(msg == "norecord"){
            alert(data.msgInfo);
        }
    });

editor.html($scope.tIg.describe);请求获取到数据之后 手动的设置数据
希望帮到大家！！