GVKun编程网logo

asp.net CKEditor和CKFinder的应用（ckeditor for asp.net）

16

此处将为大家介绍关于asp.netCKEditor和CKFinder的应用的详细内容，并且为您解答有关ckeditorforasp.net的相关问题，此外，我们还将为您介绍关于ASP.NET中CKEd

此处将为大家介绍关于asp.net CKEditor和CKFinder的应用的详细内容，并且为您解答有关ckeditor for asp.net的相关问题，此外，我们还将为您介绍关于ASP.NET中CKEditor与CKFinder的配置使用、ASP.NET版CKEditor与CKFinder的配置使用、ckeditor + ckfinder + oss存储、CKEditor 4.5 and CKFinder 3 beta 发布的有用信息。

本文目录一览：

asp.net CKEditor和CKFinder的应用（ckeditor for asp.net）

asp.net CKEditor和CKFinder的应用（ckeditor for asp.net）

CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。而CKFinder是一个功能强大的ajax文件管理器。其简单的用户界面使得各类用户，不管是从高级专业人才，还是互联网初学者，都够直观、快速学习的学习使用它。

网址：
CKEditor ：http://ckeditor.com/
CKFinder ：http://ckfinder.com/
CKEditor 的使用
准备工作
1. 下载CKEditor并将其解压到Web根目录下
2. 精简目录：
_samples文件夹（示例文件，可以删除）
_source文件夹（源程序文件，可以删除）
changes.html(更新列表，可以删除)
install.html(安装指向，可以删除)
license.html(使用许可，可以删除)
CKEditor的配置（config.js文件）
详细api参数见:http://docs.cksource.com/ckeditor_api/,我的默认配置
复制代码 代码如下:

// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
//配置默认配置
config.language = ''zh-cn''; //配置语言
// config.uiColor = ''#FFF''; //背景颜色
// config.width = 400; //宽度
// config.height = 400; //高度
// config.skin = ''v2''; //编辑器皮肤样式
// 取消 “拖拽以改变尺寸”功能
// config.resize_enabled = false;
// 使用基础工具栏
// config.toolbar = "Basic";
// 使用全能工具栏
config.toolbar = "Full";
//使用自定义工具栏
// config.toolbar =
// [
// [''Source'', ''Preview'', ''-''],
// [''Cut'', ''Copy'', ''Paste'', ''PasteText'', ''PasteFromWord'', ],
// [''Undo'', ''Redo'', ''-'', ''Find'', ''Replace'', ''-'', ''SelectAll'', ''RemoveFormat''],
// [''Image'', ''Flash'', ''Table'', ''HorizontalRule'', ''Smiley'', SpecialChar'',''PageBreak''],
// ''/'',
// [''Bold'', ''Italic'', ''Underline'', ''-'', ''Subscript'', ''Superscript''],
// [''NumberedList'', ''BulletedList'', ''-'', ''Outdent'', ''Indent'', ''Blockquote''],
// [''JustifyLeft'', ''JustifyCenter'', ''JustifyRight'', ''JustifyBlock''],
// [''Link'', ''Unlink'', ''Anchor''],
// ''/'',
// [''Format'', ''Font'', ''FontSize''],
// [''TextColor'', ''BGColor''],
// [''Maximize'', ''ShowBlocks'', ''-'', ''About'']
// ];
};

CKEditor 的应用
1. 在 aspx 页面或者 master 模板页 <head> 标签中加载 ckeditor.js：
　 <!-- 载入 CKEditor JS 文件 -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2. 修改页面的page指令ValidateRequest="false"
<%@ Page Language="C#" ValidateRequest="false" %>
3. 在<body>标签中使用ckeditor：
<!-- 使用 ckeditor 必须定义-->
<asp:TextBox ID="txtContent"TextMode="MultiLine"
Text=''<%# Bind("info") %>'' runat="server"></asp:TextBox>
4. 获取或设置编辑器中的内容
//获取编辑器中的内容
lblView.Text=Server.HtmlEncode( this.txtContent.Text);
//设置编辑器中的内容
//txtContent.Text = Server.HtmlDecode("<h1>设置内容</h1>");

CKFinder 的使用
准备工作
1. 下载CKFinder的Asp.NET版，将其解压到Web根目录下
2. 复制/bin/Release目录下的ckfinder.dll文件至站点bin目录
3. 精简目录：
_samples文件夹（示例文件，可以删除）
_source文件夹（源程序文件，可以删除）
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) {
……
};


加入如下内容：
复制代码 代码如下:

// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。
config.filebrowserBrowseUrl = location.hash + ''/ckfinder/ckfinder.html'';
config.filebrowserImageBrowseUrl = location.hash + ''/ckfinder/ckfinder.html?Type=Images'';
config.filebrowserFlashBrowseUrl = location.hash+''/ckfinder/ckfinder.html?Type=Flash'';
config.filebrowserUploadUrl = location.hash + ''/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'';
config.filebrowserImageUploadUrl = location.hash + ''/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'';
config.filebrowserFlashUploadUrl = location.hash + ''/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'';
// config.filebrowserWindowWidth = ''800'';
// config.filebrowserWindowHeight = ''500'';

CKFinder的应用
1. 在工具栏中添加站点根目录bin目录中的ckfinder.dll控件
2. 拖放控件到Web页面
3. 修改CKFinder控件属性BasePath为ckfinder目录的相对路径
常见问题
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目录的相对路径
您可能感兴趣的文章:

ASP.NET中CKEditor与CKFinder的配置使用

ASP.NET中CKEditor与CKFinder的配置使用

将CKEditor 与 CKFinder 的包含在项目中，并添加程序集的引用

从http://cksource.com网站上下载CKEditor与CKFinder，并将这两个解压的项目之下，里面的 samples文件夹中是示例，是不需要的可以将samples文件夹直接删除，在ckeditor和ckfinder目录下各有bin目录，添加对bin目录下的release目录下的程序集的引用

2.在需要富文本编辑器的页面注册用户控件

复制代码 代码如下:

<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor"%>

3.使用CKEditor

添加富文本编辑器，就像用自己的用户控件一样，使用CKEditor

复制代码 代码如下:

<CKEditor:CKEditorControl Height="400" runat="server" ID="txtNewsContent"></CKEditor:CKEditorControl>

1.集成CKFinder

在页面对应的代码页中重写Page的OnLoad方法，在OnLoad方法中将CKFinder集成到CKEditor中

复制代码 代码如下:

protected override void OnLoad(EventArgs e)
{
    CKFinder.FileBrowser browser = new CKFinder.FileBrowser();
    //集成到相应的CKEditor，参数为对应的id
    browser.SetupCKEditor(txtNewsContent);
    //设置上传文件保存的目录
    browser.BasePath = "~/Files/";
    base.OnLoad(e);
}

2.配置CKFinder

Ckfinder是一个无刷新上传的工具，对于上传，要有严格的权限控制，控制主要从两方面来说:第一，不能任何人都可以上传，只有获得授权的人才能够上传；第二，不能什么文件都可以上传，要对上传的文件进行控制，不能让用户将可执行文件上传到服务器，要对文件类型进行控制。

打开ckfinder目录下的config.ascx，第一个方法是验证授权的，看用户是否有权限上传文件，可以通过验证 session，验证用户是否被授权，默认是return false;如果不加修改，直接使用在上传时会报错，没有授权无法上传，如果测试阶段可以直接改为return true; 但发布的话最好要验证权限，不要直接return true（我在这里验证用户是否已经登录，如果登录则返回true，否则返回false）

继续往下面看在SetConfig()方法中设置的有一些上传文件时的配置，比如说上传文件保存的路径，上传文件类型的限制等,如果需要设置样式则需要修改config.js文件

以上所述就是本文的全部内容了，希望大家能喜欢

您可能感兴趣的文章:
  • asp.net 为FCKeditor开发代码高亮插件实现代码
  • Asp.net FCKEditor 2.6.3 上传文件没有权限解决方法
  • FCKeditor ASP.NET 上传附件研究
  • asp.net ckeditor编辑器的使用方法
  • ASP.NET中FCKEDITOR在线编辑器的用法
  • ASp.net下fckeditor配置图片上传最简单的方法
  • asp.net CKEditor和CKFinder的应用
  • asp.net+FCKeditor上传图片显示叉叉图片无法显示的问题的解决方法
  • ASP.NET笔记之CKEditor的使用方法

ASP.NET版CKEditor与CKFinder的配置使用

ASP.NET版CKEditor与CKFinder的配置使用

ASP.NET版 CKEditor与CKFinder的配置使用

  1. 将CKEditor 与 CKFinder 的包含在项目中，并添加程序集的引用

    从http://cksource.com网站上下载CKEditor与CKFinder，并将这两个解压的项目之下，里面的 samples文件夹中是示例，是不需要的可以将samples文件夹直接删除，在ckeditor和ckfinder目录下各有bin目录，添加对bin目录下的release目录下的程序集的引用

  2. 在需要富文本编辑器的页面注册用户控件 
    <%@ Register Assembly="CKEditor.NET" Namespace=" TagPrefix=CKEditor"%>

     

  3. 使用CKEditor

    添加富文本编辑器，就像用自己的用户控件一样，使用CKEditor 

<CKEditor:CKEditorControl Height=400" runat=server" ID=txtNewsContent"></CKEditor:CKEditorControl>

 

  1. 集成CKFinder

    在页面对应的代码页中重写Page的OnLoad方法，在OnLoad方法中将CKFinder集成到CKEditor中

     

    1         protected override void OnLoad(EventArgs e)
2         {
3             CKFinder.Filebrowser browser = new CKFinder.Filebrowser();
4             //集成到相应的CKEditor，参数为对应的id
5             browser.SetupCKEditor(txtNewsContent);
6             设置上传文件保存的目录
7             browser.BasePath = ~/Files/";
8             base.OnLoad(e);
9         }

     

  2. 配置CKFinder

    Ckfinder是一个无刷新上传的工具，对于上传，要有严格的权限控制，控制主要从两方面来说:第一，不能任何人都可以上传，只有获得授权的人才能够上传；第二，不能什么文件都可以上传，要对上传的文件进行控制，不能让用户将可执行文件上传到服务器，要对文件类型进行控制。

    打开ckfinder目录下的config.ascx，第一个方法是验证授权的，看用户是否有权限上传文件，可以通过验证 session，验证用户是否被授权，默认是return false;如果不加修改，直接使用在上传时会报错，没有授权无法上传，如果测试阶段可以直接改为return true; 但发布的话最好要验证权限，不要直接return true（我在这里验证用户是否已经登录，如果登录则返回true，否则返回false）

     

    继续往下面看在SetConfig()方法中设置的有一些上传文件时的配置，比如说上传文件保存的路径，上传文件类型的限制等,如果需要设置样式则需要修改config.js文件

总结

以上是小编为你收集整理的ASP.NET版CKEditor与CKFinder的配置使用全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

ckeditor + ckfinder + oss存储

ckeditor + ckfinder + oss存储

ckeditor 与 ckfinder 的整合方法 网上有很多，这里我也就不说了。  (主要是以前整合的现在忘记咋弄的了0.0)

 

我这里整合后直接使用js代码

<script type="text/javascript">
     CKEDITOR.replace(''content'', {
        filebrowserBrowseUrl: ''__SYSTEM__/ckfinder/ckfinder.html'',
        filebrowserImageBrowseUrl: ''__SYSTEM__/ckfinder/ckfinder.html?type=Images'',
        filebrowserFlashBrowseUrl: ''__SYSTEM__/ckfinder/ckfinder.html?type=Flash'',
        filebrowserUploadUrl: "{:U(''Public/uploadCkfinder'')}",//默认插件自带的上传地址__SYSTEM__/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'',
        filebrowserImageUploadUrl: "{:U(''Public/uploadCkfinder'')}",//默认插件自带的上传地址''__SYSTEM__/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'',
        filebrowserFlashUploadUrl: "{:U(''Public/uploadCkfinder'')}",//默认插件自带的上传地址''__SYSTEM__/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'',
     }); 
</script>

 

主要参数：filebrowserUploadUrl 地址修改了就可以。

我这里是修改成自己上传文件的地址 使用的环境 tp3.2.3的

 

后台上传方法:

/**
     * 富文本远程上传
     */
    public function uploadCkfinder(){
        $upload = new \Think\Upload();
        // 实例化上传类
        $upload->maxSize = C(''UPLOAD_FIEL_MAX_SIZE'');
        // 设置附件上传大小
        $upload->exts = array(''jpg'', ''gif'', ''png'', ''jpeg'');
        // 设置附件上传类型
        $upload->rootPath = ''./uploads/'';
        // 设置附件上传根目录
        $upload->savePath = '''';
        // 设置附件上传（子）目录
        // 上传文件
        $info = $upload->upload();
        //取出第一个元素
        $data = current($info);
        if (!$info) {
            // 上传错误提示错误信息
            echo ''<script type="text/javascript">
                        window.parent.CKEDITOR.tools.callFunction("1", "", "''.$upload->getError().''");
                    </script>'';
        } else {
            //上传成功
            $file = ''./uploads/''.$data[''savepath''].$data[''savename''];//文件路径，必须是本地的。
            //上传本地文件到阿里oss
            $ossUpload = $this->aliOssUpload( $file , $data);
            if($ossUpload == ''1000''){
                //获取完整OSS地址 , 如果相站点下可以只获取 相对地址。
                $path[''path''] = get_oss_img_crop($data[''savepath''].$data[''savename''] );
echo ''<script type="text/javascript">
                        window.parent.CKEDITOR.tools.callFunction("1", "''.$path[''path''].''", "上传成功！" , "''.$data[''savename''].'' ");</script>'';
                exit;
            } else {
                echo ''<script type="text/javascript">
                        window.parent.CKEDITOR.tools.callFunction("1", "", "上传失败");
                    </script>'';
                exit;
            }
            
        }
    }

 

//这里返回的是 完整地址,返回地址可以自己修改。




顺便付上 上传OSS方法
/**
     * 阿里对象存储-文件上传
     * @datatime 2018/1/19 16:20
     * @author lgp
     */
    private function aliOssUpload( $file = '''' , $info = array() ){
        if( !$file  || !$info ){
            return ''1008'';
        }
        // 上传成功
        vendor(''aliyun-oss-php-sdk-master.autoload'');
        $accessKeyId = C(''ALI_OSS_CONFIG.accessKeyId'');
        $accessKeySecret = C(''ALI_OSS_CONFIG.accessKeySecret'');
        $endpoint  =  C(''ALI_OSS_CONFIG.endpoint'');//你的阿里云OSS地址
        $isCName = C(''ALI_OSS_CONFIG.isCName'');
        $ossClient = new \OSS\OssClient($accessKeyId, $accessKeySecret, $endpoint , $isCName);
        $bucket = C(''ALI_OSS_CONFIG.bucket'');//oss中的文件上传空间
        $object =  $info[''savepath''] .$info[''savename''];//想要保存文件的名称
        //$file = ''./uploads/''.$info[''file''][''savepath''].$info[''file''][''savename''];//文件路径，必须是本地的。
        try{
            $result = $ossClient->uploadFile($bucket,$object,$file);
            //上传成功，自己编码
            if($result[''status''] == 0){
                if( C(''ALI_OSS_CONFIG.unlink_file'') == 1){
                    //是否删除本地
                    unlink($file);
                }
                return ''1000'';
                //$this->apiReturn(''1000'' , $info[''file''][''savepath''] . $info[''file''][''savename''] ); 
            } else {
                //$this->apiReturn(''1002''); 
                return ''1008'';
            }
            
        }catch (Exception $e) {  
            //$this->apiReturn(''1002''); 
            return ''1008'';
        }
    }

 



CKEditor 4.5 and CKFinder 3 beta 发布

CKEditor 4.5 and CKFinder 3 beta 发布

CKEditor 4.5 and CKFinder 3 beta 发布，CKEditor 4.5 更新内容如下：

  • 允许页面通过拖拽文件实现文件上传功能

  • CKEditor 的相关文档、示例、外观等方面都统一了风格

CKFinder 3 beta 的内部测试以及在 Spartan 的初步测试中反应不错，更新的内容如下：

  • 能够兼容 Moono 的皮肤

  • 支持提供翻译功能

  • 允许在应用程序中拖动对话窗口，用户可以自定义定位对话窗口

  • 支持剪切功能

  • 文件夹窗格允许滚动

更多内容请看发行日志。

CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。

可配合使用的扩展有 文件管理器KCFinder

关于asp.net CKEditor和CKFinder的应用和ckeditor for asp.net的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于ASP.NET中CKEditor与CKFinder的配置使用、ASP.NET版CKEditor与CKFinder的配置使用、ckeditor + ckfinder + oss存储、CKEditor 4.5 and CKFinder 3 beta 发布的相关知识，请在本站寻找。

本文标签：

上一篇解析redis hash应用场景和常用命令（redis中hash的应用 场景）

下一篇使用 Rails API 构建一个 React 应用程序的详细步骤（react开发app教程）

相关文章