1.将ckeditor和ckfinder文件夹拷入项目文件夹中,刷新项目。

2.ckfinder把文件夹中的bin目录下的dll文件(CKFinder.dll)添加到网站的引用中,防止出现找不到类的错误。(未能加载类型“CKFinder.Connector.Connector”。)

3. 在添加编辑控件的页面(aspx)的head中加入,并插入代码:

  1.   <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
  2. <script type="text/javascript" src="ckfinder/ckfinder.js"></script>
  3.  
  4. <asp:TextBox ID="i_content" runat="server" TextMode="MultiLine" Height="362px"
  5. Width="100%"></asp:TextBox>
  6. </div>
  7.  
  8. <script type="text/javascript">
  9. CKEDITOR.replace('<%= i_content.ClientID %>', {skin : 'kama'});
  10. </script>

  1. <script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
  2.  
  3. <textarea cols="80" id="txtremark" rows="50" runat="server"></textarea>
  4.  
  5. <script type="text/javascript">
  6. CKEDITOR.replace('txtremark', { height: 250, width: 800 });
  7. </script>

4.在项目文件夹中加入uploads文件夹来存放上传的文件

5.修改页面的page指令ValidateRequest="false"
<%@ Page Language="C#" ValidateRequest="false" %>

7.获取或设置编辑器中的内容
//获取编辑器中的内容
lblView.Text=Server.HtmlEncode( this.i_content.Text);
//设置编辑器中的内容
txtContent.Text = Server.HtmlDecode("<h1>设置内容</h1>");

//获取编辑器中的内容

model.Remark = this.txtremark.Value;

//设置编辑器中的内容

this.txtremark.Value = model.Remark;

一些用应中(如ajax应用)需要在客户端处理完所有的数据,然后用它自己的方式向服务器发送数据,在这些情况下,使用CKEditor API就足以轻松获取编辑器实例中的内容。例 如: <script type="text/javascript">
var editor_data = CKEDITOR.instances.i_content.getData();
</script>

8.加入中文字体:

打开CKeditor目录里的config.js,在

CKEDITOR.editorConfig = function( config )
{

config.language = 'zh-cn'; //中文
    //  config.uiColor = '#AFEEEE';//编辑器颜色
    config.font_names = '微软雅黑;宋体;楷体_GB2312;新微软雅黑;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';
};

9.修改文件上传目录

打开ckfinder目录里的config.ascx

修改例如:

BaseUrl = "/uploads/";

BaseDir = Server.MapPath("~/uploads/");

点击下载ckeditor、ckeditor

最新版本下载

http://ckeditor.com/download

http://ckfinder.com/download

CKEditor我下载的是3.6.4,CKFinder下载的是2.3 for ASP.NET,首先解压所有的文件,然后将ckeditor和ckfinder文件夹放到网站的目录下,可以删除ckeditor和ckfinder文 件夹下的_samples、_source 文件夹,将CKFinder.dll添加到站点的bin/文件夹中,然后在网站页面头部添加js的引用,具体路径根据自己放置的路径设置,如下:

  1. <script src="../editor/ckeditor/ckeditor.js" type="text/javascript"></script>
  2. <script src="../editor/ckfinder/ckfinder.js" type="text/javascript"></script>

在页面中添加一个textarea,具体代码如下:

  1. <textarea name="individual" id="individual" runat="server"></textarea>
  2. <script type="text/javascript">
  3. CKEDITOR.replace('individual');
  4. </script>

接下来打开ckeditor文件夹下的config.js文件,在CKEDITOR.editorConfig = function (config) {};方法中添加如下代码:

  1. config.filebrowserImageBrowseUrl = '../editor/ckfinder/ckfinder.html?Type=Images';
  2. config.filebrowserFlashBrowseUrl = '../editor/ckfinder/ckfinder.html?Type=Flash';
  3. config.filebrowserUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
  4. config.filebrowserImageUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
  5. config.filebrowserFlashUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
  6. config.filebrowserWindowWidth = '800'; //“浏览服务器”弹出框的size设置
  7. config.filebrowserWindowHeight = '500';

上面的路径也需要根据自己的设置。

然后打开ckfinder文件夹下面的config.ascx文件,为了所有的人都能看到服务器上上传文件夹里面的文件,将函数public override bool CheckAuthentication返回值改为true,其实也可以根据自身网站的安全需要去更改代码,这里只是为了简单实现,代码如下:

  1. public override bool CheckAuthentication()
  2. {
  3. // WARNING : DO NOT simply return "true". By doing so, you are allowing
  4. // "anyone" to upload and list the files in your server. You must implement
  5. // some kind of session validation here. Even something very simple as...
  6. //
  7. // return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
  8. //
  9. // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
  10. // user logs on your system.
  11.  
  12. return true;
  13. }

并且在public override void SetConfig()方法中找到BaseUrl,这个即为存放上传文件的路径,根据自己的网站进行更改。

CKFinder 2.0.2.1破解,去掉demo

一、关于CKEditor 如何配置 以及 和 CKFinder 如何配合使用就不在这里做介绍了。网上的例子也很多。或者等在下有时间了再补充这一部分。

二、我使用的版本:

CKFinder :2.0.2.1

三、破解办法:

1、解决左下角树形目录上的demo

打开ckfinder.js 找到:

p="\x3c\144\x69\x76\040\143\x6c\x61\163\x73\075\x27\166\x69\x65\x77\040\x74\x6f\157\154\137\160\141\x6e\145\154\047\040\x73\164\x79\154\x65\075\047\x64\x69\163\160\x6c\141\x79\x3a\040\142\154\x6f\x63\153\x20\041\151\155\160\x6f\162\164\141\156\164\x3b\040\160\157\163\x69\x74\x69\157\x6e\x3a\040\163\164\x61\164\x69\143\x20\x21\x69\x6d\160\157\x72\x74\141\156\164\x3b\x20\x63\157\154\x6f\x72\x3a\x20\x62\x6c\141\x63\153\x20\041\x69\155\160\157\x72\164\141\x6e\x74\x3b\x20\x62\141\x63\153\147\162\x6f\165\x6e\144\055\x63\157\154\x6f\x72\072\040\x77\x68\x69\164\145\x20\041\151\x6d\x70\157\162\164\141\156\164\073\x27\x3e\x54\150\151\163\x20\151\x73\x20\x74\150\x65\x20\x44\x45\115\117\040\x76\145\162\163\151\x6f\x6e\040\x6f\x66\x20\x43\113\x46\x69\x6e\144\x65\x72\x2e\040\x50\154\145\141\x73\x65\040\166\151\163\x69\x74\040\x74\x68\x65\040\x3c\x61\x20\150\162\145\x66\075\x27\x68\164\x74\160\x3a\057\057\143\153\146\x69\156\x64\x65\x72\x2e\143\157\x6d\x27\x20\164\x61\x72\x67\x65\164\075\x27\137\142\154\141\156\153\047\x3e\103\113\106\151\x6e\x64\145\162\x20\x77\x65\142\040\x73\151\x74\145\074\x2f\141\x3e\x20\164\157\040\157\x62\x74\x61\151\x6e\x20\x61\x20\x76\x61\154\151\144\x20\x6c\151\x63\x65\x6e\163\145\x2e\074\057\144\x69\x76\076"

修改为:

p="\x20" 或 p=“ ”  不能为空

2、解决文件列表上方的demo

打开ckfinder.js 找到:

if(!t)this.dV().aC(0).appendHtml(p);

将其删除掉。

再找:

if(N.files.length)N.fa=G;

这个不要删除,删除后就会出现“空文件夹” 提示。  把其修改为:

if(N.files.length)N.fa=''; 便可以。

至此,以全部破解成功。。。。。。。。。。。。。。

如果觉得该JS文件太大,可以再按下放提示,进行修改:

a、找到:

F="\x50\x6c\145\141\x73\x65\040\166\151\163\x69\164\x20\x74\x68\145\040\x3c\x61\x20\150\162\145\x66\x3d\x27\150\x74\164\160\072\057\x2f\143\x6b\x66\x69\x6e\x64\145\162\056\143\157\155\047\x20\x74\141\x72\147\145\x74\075\047\137\x62\x6c\141\156\x6b\x27\076\x43\113\106\151\x6e\144\x65\162\040\x77\145\x62\x20\163\151\164\x65\074\x2f\141\x3e\040\164\x6f\040\x6f\142\x74\141\x69\156\040\x61\x20\x76\141\x6c\x69\x64\040\x6c\x69\143\x65\x6e\163\x65\056"

将其修改为  F=“\x20”

其实 F翻译过来的内容就是:F=” Please visit the CKFinder web site to obtain a valid license.”

b、找到:

H="\x50\x72\157\x64\165\x63\164\x20\154\x69\143\x65\156\163\x65\x20\150\141\163\x20\x65\x78\160\x69\x72\x65\144\x2e\x20"+F

将其修改为:H=" " +   不要为空就行。

这句实际上是:H="Product license has expired."+F

注:以上修改只是为了减少文件大小

关掉Ckfinder的“浏览服务器”

关掉Ckfinder的“浏览服务器”,共有三处存在“浏览服务器”,都需要去除掉。
         a、去除上传图片功能中的浏览服务器按钮
           打开ckeditor\plugins\image\dialogs\image.js文件,搜索browseServer,找到该词第一次出现的位置,在后面添加“,style:'display:none;'”,注意,添的加是双引号中的内容,最前面有个英文逗号。  
           继续搜索,找到第二个browseServer的位置,这次要注意,用CSS标准语法,将“display:none;”加入到“style:”的后面去。如此,就关掉了上传图片时的“浏览服务器”功能。
          b、下面去掉文件上传中的“浏览服务器”按钮
          打开ckeditor\plugins\link\dialogs\link.js文件,还是搜索"browseServer"第一次出现的地方,插入双引号中的内容",style:'display:none;'"。

c、最后删掉上传FLASH中的“浏览服务器”按钮
           打开ckeditor\plugins\flash\dialogs\flash.js文件,还是搜索"browseServer"第一次出现的地方,插入双引号内的内容",style:'display:none;'"。

经过上述三步,则彻底关掉了“浏览服务器”的功能。

 
选择功能
CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn';
config.uiColor = '#FFA';
config.skin = 'office2003';
config.width = 850;
config.height = 400;
config.toolbar = 'Full';
// 取消 “拖拽以改变尺寸”功能

config.resize_enabled = false;
//下面两行,是关掉拼写检查的,不然加载整个文本框时,会很慢.
config.disableNativeSpellChecker = false ;
config.scayt_autoStartup = false;
};

上面代码中的config.toolbar =
'Full',是全功能、全按钮的界面,也可以自定义功能界面,我自定义的功能按钮如下:
config.toolbar = [['Copy','PasteText', 'PasteFromWord','Image',
'Table','Bold', 'Underline','Format', 'Font',
'FontSize','TextColor', 'BGColor','Maximize'],] ;

 
CKFinder去除某个功能
    在config.ascx文件中把ResourceType.Add 添加的功能移除

ckeditor、ckeditor配置--整合的更多相关文章

  1. CKEditor与CKFinder整合 MVC3

    今天偶然看到一篇关于 CKEditor与CKFinder整合文章,心想有一段时间没有使用这种东西了.于是乎自己动手亲自体验了一下,本以为简单但在东西编写的过程发现了很多没有遇见毛病. 所以记录一下自己 ...

  2. 网络编辑器插件ckeditor+ckfinder配置

    原帖地址 另外一个 去掉编辑器的下边栏 在config.js中加入: config.removePlugins = 'elementspath'; config.resize_enabled = fa ...

  3. CKEditor使用配置方法

    一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src= ...

  4. extjs4与ckeditor、ckfinder整合

    <script type="text/javascript"src="<?php echo Yii::app()->request->baseUr ...

  5. CKEditor与CKFinder整合并实现文件上传功能

    事先说明:此整合的是java版本的, 用到的有:jsp + ckeditor + ckfinder (没有servlet 及其它框架技术) 一.需要的资源: 用到的网站,文件自己下载: a) cked ...

  6. ckeditor的配置及使用

    一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js<script type="text/javascript" src=&q ...

  7. CKEditor和CKFinder整合实现上传下载功能

    CKEditor与CKFinder整合并实现文件上传功能 事先说明:此整合的是java版本号的, 用到的有:jsp + ckeditor + ckfinder (没有servlet 及其他框架技术) ...

  8. CKEditor && CKFinder 配置

    准备                                                                                                   ...

  9. ckeditor添加自定义按钮整合swfupload实现批量上传图片

    ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮,由于ckeditor只能上传一张图片,如果要上传多张图片就要结合ckfinder,而ckfinde ...

随机推荐

  1. linux学习笔记-dump命令的使用

    http://blog.chinaunix.net/uid-29797586-id-4458302.html

  2. f

     module.exports = util; }); 除了define之外,我们看到module.exports = util;这一句比较特殊.这句是在说,我util模块向外暴露的接口就这些,其他所 ...

  3. String 类相关知识

    1.常用方法 1)判断字符串是否为空 public boolean isEmpty()2)获取字符串长度 public int length()3)截取子子串 public String substr ...

  4. WinForm------BarManager中各种属性设置

    1.offset:红色Tool距离左边Tool的偏移量

  5. Java多线程系列

    一.参考文献 1.:Java多线程系列目录 (一) 基础篇 01. Java多线程系列--“基础篇”01之 基本概念 02. Java多线程系列--“基础篇”02之 常用的实现多线程的两种方式 03. ...

  6. CentOS 7 AMD64安装nginx和mysql

    NGINX: rpm -ivh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.8.0-1.el7.ngx.x86_64.rpm 查看: ...

  7. 快速的mysql导入导出数据(load data和outfile)

    1.load data: ***实际应用:把日志生成的xls文件load到MySQL中: mysql_cmd = "iconv -c -f utf-8 -t gbk ./data/al_ve ...

  8. DESCryptoServiceProvider

    public static byte[] DESEncrypt(byte[] data, byte[] sKey) { return DESEncrypt(data, sKey, sKey); } / ...

  9. 通过Spring @PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进

    关于在spring  容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二 ...

  10. iOS-马上着手开发iOS应用应用程序-第二部分构建应用程序

    第二部分构建应用程序 1,应用程序开发过程 2,设计用户界面 3,定义交互 4,教程:串联图 1,应用程序开发过程 定义概念 设计用户界面 定义交互 实现行为整合数据 对象是应用程序的基石 类是对象的 ...