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下使用的博文

转载于:https://www.cnblogs.com/wuhuisheng/archive/2012/08/01/2617863.html

ckeditor+ckfinder使用相关推荐

  1. ckeditor finder php,CKEDITOR CKFINDER的图片上传配置(C#/asp.net/php)

    CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还 ...

  2. CKEditor+CKFinder配置学习

    CKEditor+CKFinder配置学习 基于dotNetFramework环境, 解决方案部署在VS2010 + dotNetFramework4.0 [下载源码] 富文本编辑器学习,常见富文本编 ...

  3. 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...

  4. ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程

    从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...

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

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

  6. ckeditor+ckfinder配置用法

    ckeditor+ckfinder配置用法 一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js    <script type="te ...

  7. ckeditor+ckfinder配置

    ckeditor+ckfinder配置用法   一.使用方法:    1.在页面<head>中引入ckeditor核心文件ckeditor.js    <script type=&q ...

  8. 使用Ckeditor+Ckfinder完成图片上传

    在介绍CKEditor之前,首先要了解Fckeditor.FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器,具有轻量化,安装配置的特点,能够和PHP.JavaScript. ...

  9. asp.net mvc中ckeditor+ckfinder的配置方法

    开源网页编辑软件FCKEditor在09年发布更新到3.0,并改名为CKEditor.改进后的ckeditor更加模块话,配置更加灵活,和以前的fckeditor使用方式上也有所不同.在我的mvc项目 ...

  10. C# ckeditor+ckfinder的图片上传配置

    CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...

最新文章

  1. 图灵奖得主LeCun力推无监督学习:要重视基于能量的学习方法
  2. json 数据类型简介
  3. 利用SOS分析调试托管代码--(1)
  4. RocketMQ原理解析-producer 4.发送分布式事物消息
  5. IM云将给在线教育带来哪些变革?
  6. bellmanford队列优化
  7. [WinError 127] 找不到指定的程序
  8. nginx实现大小写字母转换(ngx_http_lower_upper_case模块)
  9. 关于mobile中datagrid的使用
  10. Notepad++高亮AS文件
  11. 漫谈云计算与OpenStack的前世今生
  12. 十、Python-模块
  13. 实验2-1-5 将x的平方赋值给y (5 分)
  14. 没有编辑器时,使用echo更换源
  15. 简单的nios II 流水灯 软件部分
  16. Spring 菜鸟教程 IntrospectorCleanupListener
  17. 手机最强 Python 编程神器,Android、IOS 都可以!
  18. java 行政区划代码 民政部 json
  19. 425_PICkit2烧写PIC18F4580 MCU
  20. 一文讲清跨境S2B2C模式及线上品牌/新零售品牌实战打法

热门文章

  1. Hyperledger Fabric blockchain explorer 重启
  2. 老年代的更新机制_魔兽世界:60年代五大“远古”机制,这根胡萝卜,可是当年的神器...
  3. 桂电管理科学可以转计算机,去年调到桂电计算机的感言,希望对各研友有帮助...
  4. android灰度发布平台,移动APP灰度发布策略
  5. mount -t iso9660 /dev/cdrom /mnt
  6. spring boot Junit5单元测试
  7. mysql 使用gzip 压缩 文件,本地对 gzip 压缩的文件解压缩
  8. MAC中JAVA安装和环境变量设置,java 11
  9. Linux 查找进程与结束进程
  10. java基础---线程