学步园

首先当然是先去下载这两样东西:

http://ckeditor.com/

http://ckfinder.com/

 

 1.开始配置

 

1.1把ckeditor解压.放到网站的目录下面.

 

1.2 把下载的ckfinder 放在刚才的 ckeditor 的根目录下面

 

1.2.1 先配置ckfinder 吧.

 

打开ckfinder目录.找到 config.ascx

修改public override bool CheckAuthentication()方法.这是用来验证用户是否登录的.下面是return false;. 你按照自己的业务修改一下

比如( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );

找到ckfinder.js(这是用来修改 文件上传以后,文件存放的位置)

默认是:CKFinder.DEFAULT_BASEPATH = '/ckfinder/' ;

 

1.2.2 配置 ckeditor

 

打开 ckeditor目录下面的config.js文件

下面是我的配置

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.AutoDetectLanguage = false ; 
config.language = 'zh-cn'; //配置语言
config.uiColor = '#F00'; //背景颜色
config.width = 700; //宽度
config.height = 200; //高度
config.skin='v2';
config.theme = 'default';

config.tabSpaces = 4; //tab键增加空格
config.resize_enabled =true ;//是否可以调整编辑框的大小
config.toolbarCanCollapse =true; //是否可以伸缩
config.toolbarStartupExpanded =false; //加载的时候是否默认关闭

//配置ckfinder
config.filebrowserBrowseUrl = '/xx/xx/ckeditor/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = '/xx/xx/ckeditor/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = '/xx/xx/ckeditor/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = '/xx/xx/ckeditor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = '/xx/xx/ckeditor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = '/xx/xx/ckeditor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth = '800';
config.filebrowserWindowHeight = '500';

//工具栏
config.toolbar = [
['Source','-','Preview','-','Templates'],  
   ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], 
       ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],   
         ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],  
                 ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],   
              ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],    
               ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],     ['Link','Unlink','Anchor'],    
                ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],   
                    ['Styles','Format','Font','FontSize'],    
                   ['TextColor','BGColor'],    
                    ['Maximize', 'ShowBlocks','-'] ];

};

 

为了减少编辑器的大小，可以删除一些不必要的文件，如把_samples、_source、_tests三个文件夹删除，进入lang文件目录，保留en.js、zh.js、zh-cn.js三个文件，其余的语言文件如果你用不到，可以删除。

 

 2.调用

 

<script type="text/javascript" src="http://www.cnblogs.com/xx/ckeditor/ckeditor.js"></script>
 详细内容:<textarea class="ckeditor" id="editor1" name="editor1" runat="server">
                </textarea>
       <script type="text/javascript">
      CKEDITOR.replace( 'editor1' );
           </script>

 

 

 差不多了.试验一下吧

 附加: /Files/sera/ckeditor文档.rar 这个配置文档是Google大神翻译的.有一些看起来有点难度