- 浏览: 35045 次
- 性别:
- 来自: 广州
最近访客 更多访客>>
最新评论
-
charrys:
呵自己跟自己留言
JS可以控制样式的名称写法 -
charrys:
自己顶下
我的json获取数据实例,直接运行就可以看到了
一、官方Download
1、CKEditor :点击CKEditor.NET标题下的“Download zip”按钮
此处使用当前最新版本“CKEditor.NET 3.5.2, released on 7 March 2011”
2、CKFinder :点击Asp.net标签下的“Download zip”或者“Download tar.gz”按钮(PS:两个按钮下载的内容一样,说明 )
此处使用当前最新版本“version: 2.0.2, updated 03.03.2011”
——CKEditor是新一代的FCKEditor,很明显的不同点是CKEditor中文件上传功能独立出来了,需要配合使用CKFinder 才能实现。
二、具体配置顺序
1、在项目中添加对应的文件
右击网站,添加引用。依次添加两个文件夹中“\bin\Debug” 中的dll文件——CKEditor.NET.dll、CKFinder.dll
2、将文件夹“ckeditor”、 “ckfinder”添加到网站的根目录下
注意,下载的文件中包括很多用不到的文件,可以稍微清理一下:
此版本对于 CKEditor只需要“\_Samples”文件夹下的“ckeditor”文件夹即可,其余都可不要。
_source文件夹(源程序文件,可以删除)
changes.html(更新列表,可以删除)
install.html(安装指向,可以删除)
license.html(使用许可,可以删除)
3、修改配置文件
(1)CKEditor配置:打开“ckeditor\config.js”文件,根据需要添加配置信息
- CKEDITOR.editorConfig = function (config) {
- config.skin = 'v2' ; //选择皮肤,源文件在“ckeditor\skins\” 中
- config.resize_enabled = false ;
- // 基 础工具栏
- // config.toolbar = "Basic" ;
- // 全 能工具栏
- // config.toolbar = "Full" ;
- // 自 定义工具栏
- config.toolbar =
- [
- ['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
- ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
- ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
- ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
- ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'],
- ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
- ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']
- ];
- }
CKEDITOR.editorConfig = function(config) { config.skin = 'v2'; //选择皮肤,源文件在“ckeditor\skins\”中 config.resize_enabled = false; // 基础工具栏 // config.toolbar = "Basic"; // 全能工具栏 // config.toolbar = "Full"; // 自定义工具栏 config.toolbar = [ ['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/', ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/', ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About'] ]; }
(2)在CKEditor中集成CKFinder,注意对应文件的路径
将下面的内容继续添加到 “ckeditor\config.js”文件中
- CKEDITOR.editorConfig = function (config) {
- ……
- config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html' ; //不要写成"~ /ckfinder/..."或者"/ckfinder/..."
- config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images' ;
- config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash' ;
- config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files' ;
- config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images' ;
- config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash' ;
- config.filebrowserWindowWidth = '800' ; //“浏览服务器”弹出框的size设置
- config.filebrowserWindowHeight = '500' ;
- }
- CKFinder.SetupCKEditor(null, '../ckfinder /');//注意ckfinder的路径对应实际放置的位置
CKEDITOR.editorConfig = function(config) { …… config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要写成"~/ckfinder/..."或者"/ckfinder/..." config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images'; config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash'; config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; config.filebrowserWindowWidth = '800'; //“浏览服务器”弹出框的size设置 config.filebrowserWindowHeight = '500'; } CKFinder.SetupCKEditor(null, '../ckfinder/');//注意ckfinder的路径对应实际放置的位置
(3)CKFinder的配置:
打开“ckfinder\”下的用户控件config.ascx,更改其BaseUrl路径:
- BaseUrl = "~/ckfinder/userfiles/" ;//or BaseUrl = "ckfinder/userfiles/" ;
BaseUrl = "~/ckfinder/userfiles/";//or BaseUrl = "ckfinder/userfiles/";
并且更改:
- public override boolCheckAuthentication() {
- //return false;
- return true;
- }
public override boolCheckAuthentication() { //return false; return true; }
至此,配置工作终于完成啦。。
三、在页面应用CKEditor控件
1、在页面的<head>中添加对应的js引用:
- < script type = "text/javascript" language = "javascript" src = "ckfinder/ckfinder.js" > </ script >
- < script type = "text/javascript" language = "javascript" src = "ckeditor/ckeditor.js" > </ script >
<script type="text/javascript" language="javascript" src="ckfinder/ckfinder.js"></script> <script type="text/javascript" language="javascript" src="ckeditor/ckeditor.js"></script>
2、然后,在<body>中需要放置该控件的位置加入如下代码,分别有以下几种使用方法:
(1)给控件添加指定的class属性
- < textarea id = "textarea1" name = "editor1" class = "ckeditor" > hello! </ textarea >
<textarea id="textarea1" name="editor1" class="ckeditor">hello!</textarea>
服务器控件:
- < asp:TextBox ID = "TextBox1" runat = "server" TextMode = "MultiLine" CssClass = "ckeditor" > </ asp:TextBox >
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2)注入js代码——此处js代码最好写在控件之后,也可以写在<head>中
- < textarea id = "textarea1" name = "editor1" > hello! </ textarea >
- < script type = "text/javascript" >
- CKEDITOR.replace('editor1', { height:400, width:800 });
- </ script >
<textarea id="textarea1" name="editor1">hello!</textarea> <script type="text/javascript"> CKEDITOR.replace('editor1', { height:400, width:800 }); </script>
服务器控件:
- < asp:TextBox ID = "mckeditor" runat = "server" TextMode = "MultiLine" > </ asp:TextBox >
- < script type = "text/javascript" >
- CKEDITOR.replace('< %=mckeditor.ClientID % > ');
- </ script >
来自 (http://www.ok22.org/art_detail.aspx?id=134 )
发表评论
-
我的json获取数据实例,直接运行就可以看到了
2011-04-18 10:36 1273开始一直用jq的ajax接收值也是字符但是没用过json数据。 ... -
kindeditor/ckeditor 编辑器加+图片自动上传成功(源码下载)
2011-04-03 11:40 1962编辑器加+图片自动上传并且更新编辑器图片的URL成功完例! ... -
js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)
2011-03-12 16:28 1357iframe的高度一直是让人头疼的问题。今天因为有个项目需要用 ... -
js遮罩层
2011-03-12 15:23 765直接贴代码了!(来自:http://www.ok22.org/ ... -
js多Tab自动切换,带完善的鼠标事件
2011-03-01 09:31 1529js多Tab自动切换,带完善的鼠标事件! 说明:打开鼠标时 ... -
js多个tab切换简单不需要在body内添加事件
2011-02-15 17:20 1303注意的是a的里面的rel属性window.onload事件!在 ... -
js文字上下滚动+左右滚动兼容FF/IE
2011-02-15 11:07 1753我也是最近因为要做这 ... -
前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态
2011-02-14 15:59 1292看了很多别人写的tab切换效果感觉都只是div+js去切换已存 ... -
清空数组的两种方式
2011-02-09 16:58 2229方式一,length赋值为0 这种方式很有意思,其它语言 ... -
js时间倒计时
2011-01-06 11:26 843前断时间,因为需要 ... -
JS可以控制样式的名称写法
2011-01-06 11:19 988盒子标签和属性对照 CSS语法 (不区分大小写) ... -
js给C#控件赋值
2010-12-30 10:34 1732前台代码 Html代码 <%@ Pa ... -
iframe里面的页面调用父窗口,左右窗口js函数的方法
2010-12-30 10:33 1187iframe里面的页面调用父窗口,左右窗口js函数的方法 ... -
关于图片延迟加载技术-ImageLazyLoad
2010-12-30 10:29 1065关于图片延迟加载技术的优点与缺点(来自http://www ... -
js判断父页存在
2010-12-30 10:26 774当你有多个页面有iframe内页时,你肯定也不想别人直接打开子 ...
相关推荐
html在线编程,CKEditor+CKFinder+asp.net配置的实例
ckeditor4.46+ckfinder2.4版本配置,包含配置文档,简单明了
CKEditor+CKFinder+jsp的整理
在线编辑器超级棒!点一亿个赞,就是版本老了些,but关键还看怎么应用。
ckeditor+ckfinder配置实现图片上传实例: 版本ckeditor4.0.1+ckfinder2.3.1,已经去掉授权提示, 需要的可以下下来研究下。
ckeditor+ckfinder 完美组合编辑器 加图片上传功能 里面有demo演示页面。
ckeditor+ckfinder配置+操作详解,实现上传图片
外国知名网页编辑器,比国内的其它网页编辑器更稳定,更好用.支持WORD内容复制,图片上传,FLASH上传功能,表格插入等等... 上传图片路径设置 打开UploadFile.asp,修改filepath=filepath & "../../upload/images/
三个非常实用的web开发工具,ckeditor是html编辑器,ckfinder是用来上传图片、swf的插件,jwplayer是可以上传视频文件如mp4、flv等等
第一步:网站需要引用CKFinder的dll(目录:/CKFinder/bin/Release/CKFinder....配置完成后CKEditor 就带有上传功能了,但假如上传图片时,图片的文件是用原来图片的名字,想改为随机文件名呢,怎么办?接着看第三步。
以上文件包含 ckeditor3.6.4 和ckfinder2.3 及其他们的相关配置。经过本人测试,如若按照文档配置设置,能实现在线编辑功能以及图片等文件上传功能。
ckeditor4+ckfinder3.1组合,里面已作PHP初步配置,这是本人花了一上午时间搞定的.(已去除域名限制,有条件的朋友请资助下ckeditor项目组)
2.ckfinder 上传文件名以时间命名,去掉修改文件及文件夹功能并屏蔽按钮。 附调用方法: <textarea cols="80" id="content" name="content" class="ckeditor"></textarea> [removed][removed] [removed] ...
此文本编辑器可以完成类型word的编辑,同时实现图片上传功能。
Asp.net 最新版CKEditor+CKFinder配置实现图片上传
已经将ckeditor4.2+ckfinder2.3.1功能整合到一起。直接将js文件夹复制到web项目中即可。
用过fckeditor的站长都知道,由于其打开速度的不理想把fckeditor用于网站做为在线编辑器并不是明智的选择,ckeditor正好弥补了这一缺陷,ckeditor是由Frederico Knabben,针对网络而开发的在线编辑器。它提供了令人...
最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...
PHP版本的CKEditor v3.6.5 + ckfinder v2.3。我已经根据网上的教程对其进行破解过了,没有再提示要我注册或收费的。如果你整合到自己的系统中发现还是未注册,那就使用包中的注册机进行注册。很容易。 东西确实不错...
ckfinder和ckeditor的整合,ckfinder没有批量上传图片,我加了一个小图标,实现批量上传。网上很少java版的两个整合,自己写了个。不过有个小问题,忙着也没时间去看下,IE下上传图片报找不到路径,大家看看改下哪就...