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下使用的博文
转载于:https://www.cnblogs.com/wuhuisheng/archive/2012/08/01/2617863.html
ckeditor+ckfinder使用相关推荐
- ckeditor finder php,CKEDITOR CKFINDER的图片上传配置(C#/asp.net/php)
CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还 ...
- CKEditor+CKFinder配置学习
CKEditor+CKFinder配置学习 基于dotNetFramework环境, 解决方案部署在VS2010 + dotNetFramework4.0 [下载源码] 富文本编辑器学习,常见富文本编 ...
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
- ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...
- 网络编辑器插件ckeditor+ckfinder配置
原帖地址 另外一个 去掉编辑器的下边栏 在config.js中加入: config.removePlugins = 'elementspath'; config.resize_enabled = fa ...
- ckeditor+ckfinder配置用法
ckeditor+ckfinder配置用法 一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="te ...
- ckeditor+ckfinder配置
ckeditor+ckfinder配置用法 一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type=&q ...
- 使用Ckeditor+Ckfinder完成图片上传
在介绍CKEditor之前,首先要了解Fckeditor.FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器,具有轻量化,安装配置的特点,能够和PHP.JavaScript. ...
- asp.net mvc中ckeditor+ckfinder的配置方法
开源网页编辑软件FCKEditor在09年发布更新到3.0,并改名为CKEditor.改进后的ckeditor更加模块话,配置更加灵活,和以前的fckeditor使用方式上也有所不同.在我的mvc项目 ...
- C# ckeditor+ckfinder的图片上传配置
CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...
最新文章
- 图灵奖得主LeCun力推无监督学习:要重视基于能量的学习方法
- json 数据类型简介
- 利用SOS分析调试托管代码--(1)
- RocketMQ原理解析-producer 4.发送分布式事物消息
- IM云将给在线教育带来哪些变革?
- bellmanford队列优化
- [WinError 127] 找不到指定的程序
- nginx实现大小写字母转换(ngx_http_lower_upper_case模块)
- 关于mobile中datagrid的使用
- Notepad++高亮AS文件
- 漫谈云计算与OpenStack的前世今生
- 十、Python-模块
- 实验2-1-5 将x的平方赋值给y (5 分)
- 没有编辑器时,使用echo更换源
- 简单的nios II 流水灯 软件部分
- Spring 菜鸟教程 IntrospectorCleanupListener
- 手机最强 Python 编程神器,Android、IOS 都可以!
- java 行政区划代码 民政部 json
- 425_PICkit2烧写PIC18F4580 MCU
- 一文讲清跨境S2B2C模式及线上品牌/新零售品牌实战打法
热门文章
- Hyperledger Fabric blockchain explorer 重启
- 老年代的更新机制_魔兽世界:60年代五大“远古”机制,这根胡萝卜,可是当年的神器...
- 桂电管理科学可以转计算机,去年调到桂电计算机的感言,希望对各研友有帮助...
- android灰度发布平台,移动APP灰度发布策略
- mount -t iso9660 /dev/cdrom /mnt
- spring boot Junit5单元测试
- mysql 使用gzip 压缩 文件,本地对 gzip 压缩的文件解压缩
- MAC中JAVA安装和环境变量设置,java 11
- Linux 查找进程与结束进程
- java基础---线程