在线编辑器Kindedior在ASP.NET下实现图片批量上传

最新推荐文章于 2020-05-12 20:21:43 发布

原创最新推荐文章于 2020-05-12 20:21:43 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

本文详述了如何在ASP.NET环境中配置KindEditor实现图片批量上传功能，包括下载KindEditor、添加引用、调整JavaScript代码以及修改图片保存路径、图片空间路径和上传限制。确保在ASP.NET中成功上传图片的关键是正确修改特定文件。

前一段时间做网站开发的时候需要用到在线编辑器实现批量上传图片，在网上找了好多资料，发现kindeditor可以满足需求，由于网上关于kindeditor的用法参差不一，现在特意将kindeditor的用法整理出来，供大家参考，这个方法已经经过测试。

一、实现基本功能【批量上传图片】

kindeditor-4.1.10下载链接：http://kindeditor.net/down.php

1.下载Kindeditor，本文使用版本为kindeditor-4.1.10，解压，其中的asp、example、jsp、php文件夹可以删除。

2.把kindeditor文件夹放在网站的根目录下，点击网站右键，添加引用，浏览->kindeditor->asp.net->bin找到这个文件,点击添加。

3.aspx页面：<head>标签内,src路径根据自身实际情况而定，<textarea>标签插入<body>标签内

标签内

       <link rel="Stylesheet" href="themes/default/default.css"/>  
         <script type="text/javascript" charset="utf-8" src="kindeditor-all-min.js"></script>  
         <script type="text/javascript" charset="utf-8" src="lang/zh_CN.js"></script>  
         <script type="text/javascript" charset="utf-8" src="kindeditor.js"></script></span></span>

<textarea id="editor_id"  name="content" rows="5" cols="3" style="width:700px;height:400px;visibility:hidden;"></textarea>

在<textarea>标签上面插入以下代码：

<script type="text/javascript">    
                            var editor;    
                            KindEditor.ready(function (K) {    
                                editor = K.create('textarea[name="content"]', {    
                                    uploadJson: '../../kindeditor/asp.net/upload_json.ashx',    
                                    fileManagerJson: '../../kindeditor/asp.net/file_manager_json.ashx',    
                                    allowFileManager: true    
                                });    
    
                            });    
    
                </script>

4.找到kindeditor->plugins->filemanager->filemanager.js文件，修改以下代码