KindEditor上传图片和修改图片[通俗易懂]-kindeditor上传图片跨域报错

KindEditor上传图片和修改图片[通俗易懂]1.首先就是下载KindEditor（这里是官网的地址）2.部署编辑器解压kindeditor-x.x.x.zip文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/Note您可以根据需求删除以下目录后上传到服务器。asp-ASP程序asp.net-ASP.NET程序php-PHP程序js…_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  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&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);请求获取到数据之后 手动的设置数据
希望帮到大家！！