ckeditor+ckfinder使用

http://ckeditor.com/download/ 下载ckeditor  http://ckfinder.com/download下载ckfinder

如果您不愿意在官方下载 可以在CSDN上下载http://download.csdn.net/detail/accesszhb/4468438

一.ckeditor 精简
精简前:4.52M
精简后:853K
1.删除_samples和_source文件夹,分别为示例文件和未压缩源程序
2.删除lang文件夹下除zh-cn.js,en.js下的所有语言文件.根据需要删除
3.删除根目录下的changes.html(更新列表),install.html(安装指向),license.html(使用许可).
4.删除skins目录下不需要的皮肤.我一般用V2(简单.朴素)
//如果只保留V2则必须在config.js中指定皮肤

二.ckeditor 相关文件配置路径
1./ckeditor.js
核心文件,调用需加载
2./config.js 配置文件,参数配置均在此完成

三.ckeditor应用(.net环境)
1.引用js脚本
<script
type=”text/javascript”
src=”ckeditor/ckeditor.js”></script>

2.将相应的控件替换成编辑器代码
<textarea ID="Content" Rows="10" ></textarea>
<script type=”text/javascript”>

 if (CKEDITOR.instances['Content']) {
        CKEDITOR.remove(CKEDITOR.instances['Content']);
    }//如果实例已存在
    var editor = CKEDITOR.replace('Content');//实例化
    editor.BasePath = "Scripts/ckfinder/";
    CKFinder.setupCKEditor(editor, "/ckfinder/");//相对路径

</script>

四.ckeditor配置(config.js配置文件)

以下只是必要的配置 其他更多配置属性在其它博客上查询这里就不具体罗列

CKEDITOR.editorConfig = function (config) {
    config.language = 'zh-cn';
    config.toolbar = 'Basic';
    config.toolbar = 'Full';
    config.toolbar_Full = [
    ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', ], 
    //['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', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
       '/',
    ['Styles', 'Format', 'Font', 'FontSize'],
    ['TextColor', 'BGColor']
    ];
    
    config.filebrowserBrowseUrl = '/Scripts/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
    config.filebrowserImageBrowseUrl = '/Scripts/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹
    config.filebrowserFlashBrowseUrl = 'http://www.cnblogs.com/Scripts/ckfinder/ckfinder.html?Type=Flash';  //上传Flash时浏览服务文件夹
    config.filebrowserUploadUrl = '/Scripts/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签) 
    config.filebrowserImageUploadUrl = 'http://www.cnblogs.com/Scripts/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签) 
    config.filebrowserFlashUploadUrl = 'http://www.cnblogs.com/Scripts/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签)
};

五、如果遇到此报错:未能加载类型“CKFinder.Connector.Connector”。

在WebSite添加引用CKFinder.dll 在你下载的ckfinder—>bin—>DeBug目录下

六、CKEditor的取值和赋值

<script type="text/javascript">      CKEDITOR.replace('Content', { toolbar: 'Basic' }); </script>

修改为：

<script type="text/javascript">      var myeditor=CKEDITOR.replace('Content', { toolbar: 'Basic' }); </script>

myeditor.document.getBody().getText(); //取文本形式的值 
myeditor.document.getBody().getHtml(); //取包含html代码的值 

//赋值

CKEDITOR.instances['Content'].setData('内容');//从此方法可以得出结论CKEDITOR.instances['Content']就是获取ckeditor的实例

如果要赋值那么就是 myeditor.setData("需要赋值的内容");

http://wenku.baidu.com/view/7c3e98738e9951e79b892757.html 此博文有该控件的使用方法

七、去除上传图片功能中的浏览服务器按钮

打开ckeditor\plugins\image\dialogs\image.js文件，搜索browseServer，找到该词第一次出现的位置，在后面添加,style:'display:none;'。 

第二个browseServer位置是第二菜单：超链接的“浏览服务器”按钮，也可按上种办法去掉

http://www.cnblogs.com/guanhp2013/archive/2012/03/06/2381203.html 圆友此控件.net下使用的博文