黑马程序员_ckeditor+ckfinder实现本地图片上传

最新推荐文章于 2019-07-10 09:39:19 发布

whilelie

最新推荐文章于 2019-07-10 09:39:19 发布

阅读量1.7k

点赞数

分类专栏： C#

本文链接：https://blog.csdn.net/whilelie/article/details/8514075

版权

C# 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

“----------ASP.Net+Android+IOS开发、Net培训、期待与您交流！----------”

1.下载CKEditor 3.6.6 (http://ckeditor.com/download)

2.下载ckfinder(http://cksource.com/)

3.解压这两个文件到网站根目录下

4.复制ckfinder/bin/Release目录下的ckfinder.dll文件至站点bin目录

CKFinder的配置
1. 打开 ” \ckfinder\config.ascx “，为SetConfig方法中的 BaseUrl 指定默认路径，如：
// 以userfiles 为默认路径，其目录下会自动生成images、flash等子目录。
BaseUrl = ” ~/ckfinder/userfiles/”;
// NOTE：注意“ ~/ ”。
2. 与CKEditor集成
打开CKEditor目录中的config.js文件在function 函数中
复制代码代码如下:
// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
……

    config.uiColor = '#F7F8F9'
    config.scayt_autoStartup = false
    config.language = 'zh-cn'; //中文
    config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //上傳文件瀏覽服務文件夾
    config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';//上傳圖片時瀏覽服務文件夾
    config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';//上傳Flash時瀏覽服務文件夾
    config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';//上傳文件按鈕(標籤)
    config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';//上傳圖片按鈕(標籤)
    config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';//上傳Flash按鈕(標籤)

};

常见问题
1. 症状：因为安全原因，文件不可浏览。请联系系统管理员并检查CKFinder配置文件。
原因：未设置用户身份验证或者用户未登录。
语句：
复制代码代码如下:
public override bool CheckAuthentication()
{
return false;
}

解决：在CKFinder的config.ascx文件中修改public override bool CheckAuthentication() 加入用户身份权限验证方法。
2. 症状：未知错误
原因：设置不进行用户身份验证，但是 BaseUrl 路径不对。
语句：
复制代码代码如下:
public override bool CheckAuthentication()
{
return true ;
}

解决：在CKFinder的config.ascx文件中的public override void SetConfig() 修改

// 以userfiles 为默认路径，其目录下会自动生成images、flash等子目录。
BaseUrl = ” ~/ckfinder/userfiles/”;
// NOTE：注意“ ~/ ”。
3. 症状：访问带有CKFinder的页面时报错“HTTP 错误 404 – Not Found”
解决：修改CKFinder控件的BasePath属性为ckfinder目录的相对路径

测试:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
    
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <textarea name="content" rows="30" cols="50" id="content">
             
         </textarea>
    <input type="button" value="确定"  οnclick="return CheckForm();" />
    <input type="button" value="取消"  οnclick="return Clear();"/>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">

    if (typeof CKEDITOR == "undefined") {
        alert("加载CKEDitor失败!");
    }
    else {
        var editor = CKEDITOR.replace("content");
    }
    function CheckForm() {
        if (CKEDITOR.instances.content.getData().length == 0) {
            alert("請輸入內容!");
            return false;
        }
        return false;
    }
    function Clear() {
        //CKEditor1是textArea的ID
还必须得用input type=button???         CKEDITOR.instances.content.setData("");
    }
    </script>

2.测试结果

whilelie

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
黑马程序员_ckeditor+ckfinder实现本地图片上传

1.下载CKEditor 3.6.6 (http://ckeditor.com/download)2.下载ckfinder(http://cksource.com/)3.解压这两个文件到网站根目录下4.复制ckfinder/bin/Release目录下的ckfinder.dll文件至站点bin目录CKFinder的配置1. 打开 ” \ckfinder\config.ascx
复制链接

扫一扫