- 浏览: 36173 次
- 性别:
- 来自: 广州
最近访客 更多访客>>
最新评论
-
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 1312开始一直用jq的ajax接收值也是字符但是没用过json数据。 ... -
kindeditor/ckeditor 编辑器加+图片自动上传成功(源码下载)
2011-04-03 11:40 1994编辑器加+图片自动上传并且更新编辑器图片的URL成功完例! ... -
js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)
2011-03-12 16:28 1381iframe的高度一直是让人头疼的问题。今天因为有个项目需要用 ... -
js遮罩层
2011-03-12 15:23 796直接贴代码了!(来自:http://www.ok22.org/ ... -
js多Tab自动切换,带完善的鼠标事件
2011-03-01 09:31 1564js多Tab自动切换,带完善的鼠标事件! 说明:打开鼠标时 ... -
js多个tab切换简单不需要在body内添加事件
2011-02-15 17:20 1334注意的是a的里面的rel属性window.onload事件!在 ... -
js文字上下滚动+左右滚动兼容FF/IE
2011-02-15 11:07 1788我也是最近因为要做这 ... -
前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态
2011-02-14 15:59 1338看了很多别人写的tab切换效果感觉都只是div+js去切换已存 ... -
清空数组的两种方式
2011-02-09 16:58 2271方式一,length赋值为0 这种方式很有意思,其它语言 ... -
js时间倒计时
2011-01-06 11:26 868前断时间,因为需要 ... -
JS可以控制样式的名称写法
2011-01-06 11:19 1016盒子标签和属性对照 CSS语法 (不区分大小写) ... -
js给C#控件赋值
2010-12-30 10:34 1777前台代码 Html代码 <%@ Pa ... -
iframe里面的页面调用父窗口,左右窗口js函数的方法
2010-12-30 10:33 1214iframe里面的页面调用父窗口,左右窗口js函数的方法 ... -
关于图片延迟加载技术-ImageLazyLoad
2010-12-30 10:29 1108关于图片延迟加载技术的优点与缺点(来自http://www ... -
js判断父页存在
2010-12-30 10:26 826当你有多个页面有iframe内页时,你肯定也不想别人直接打开子 ...
相关推荐
本资源包含三款知名的在线编辑器:CKEditor、FCKEditor以及SinaEditor,这三者都是JavaScript库,用于在Web应用程序中集成文本编辑功能。 CKEditor(前身为FCKeditor)是一款功能强大的开源富文本编辑器。它支持...
CKEditor 4.4.4_full.zip这个版本包含了完整的功能集,允许开发者在网页上创建和编辑复杂的文档,支持插入图片、链接、表格、列表等元素,同时也可自定义样式和工具栏布局,以适应不同的项目需求。它具有良好的跨...
CKEditor 4.46 和 CKFinder 2.4 是两个流行且功能强大的在线文本编辑器组件。CKEditor 是一个富文本编辑器,用于在网页上提供类似桌面应用的文本编辑体验,而 CKFinder 是一个文件管理器,与 CKEditor 配合使用,...
CKEditor编辑器是一款广泛应用于网页和在线应用的富文本编辑器,它提供了丰富的文本格式化选项,使得非技术用户也能方便地编辑和排版文本。"行高插件"是CKEditor的一个扩展功能,旨在为用户提供调整文本行高的能力,...
CKEditor是一款流行的开源富文本编辑器,广泛应用于网页内容编辑,它提供了丰富的文本格式化选项、图片处理、链接插入等功能。CKEditor以其易用性、可定制性和跨浏览器兼容性著称,支持多种编程语言环境,如...
CKEditor和CKFinder是两个非常重要的工具,常用于构建富文本编辑器和文件管理功能的Web应用程序。在ASP.NET框架下,它们可以帮助开发者提供高级的文本编辑和文件上传下载体验。接下来,我们将深入探讨这两款工具以及...
CKEditor+CKFinder+jsp的整理
总之,"ckeditor+ckfinder"组合为网页内容编辑提供了强大的图片上传和文件管理功能,极大地提升了用户体验。其灵活性和易用性使其成为开发人员的首选工具之一。通过学习和掌握这个组合,开发者可以创建更加功能齐全...
1. **安装CKEditor**:将CKEditor的文件上传到服务器,配置编辑器的基本设置,如工具栏、语言等。 2. **安装CKFinder**:同样将CKFinder的文件上传至服务器,并设定相应的路径和配置文件。 3. **集成配置**:在...
外国知名网页编辑器,比国内的其它网页编辑器更稳定,更好用.支持WORD内容复制,图片上传,FLASH上传功能,表格插入等等... 上传图片路径设置 打开UploadFile.asp,修改filepath=filepath & "../../upload/images/
【ckeditor+ckfinder+ssh框架】的组合是用于构建一个功能强大的在线文本编辑器的解决方案,它可以提供类似于Microsoft Word的编辑体验,并且支持图片和其他媒体文件的上传功能。以下是这个集成的具体实现步骤和相关...
CKEditor是一款功能强大的在线文本编辑器,而CKFinder则是一个与之配套的文件管理器,允许用户方便地上传、管理和选择图片或其他文件。我们将讨论这两个工具的基本概念、配置步骤以及如何将它们集成以实现图片上传...
4. **测试和调试**:测试CKEditor中的“插入图片”功能,确保CKFinder能正常打开,用户可以上传图片,并在编辑器中显示。 5. **安全考虑**:确保上传的文件被安全地存储,防止恶意文件上传,同时,对文件访问进行...
CKEditor和CKFinder是两个非常流行的开源Web编辑器和文件管理工具,它们在网页内容编辑和上传文件方面提供了强大的功能。CKEditor是一个富文本编辑器,而CKFinder则作为一个插件,为CKEditor提供了一个方便的文件...
可以通过修改配置文件定制编辑器的功能和外观。 3. **插件系统**:CKEditor 4.2支持丰富的插件,可以扩展其功能,例如表格工具、公式编辑器、源代码视图等。CKFinder就是这样一个插件,用于文件和图像管理。 **...
最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...
第一步:网站需要引用CKFinder的dll(目录:/CKFinder/bin/Release/CKFinder....配置完成后CKEditor 就带有上传功能了,但假如上传图片时,图片的文件是用原来图片的名字,想改为随机文件名呢,怎么办?接着看第三步。
同时,可能还需要配置CKEditor的文件浏览器,以便在编辑器内预览已上传的图片。 2. **创建Struts2 Action**:在Struts2项目中创建一个Action类,比如`ImageUploadAction`,并定义一个方法来处理上传请求。这个方法...
【ckeditor+ckfinder 配置】是将两个流行的开源富文本编辑器集成在一起,以便在ASP环境下实现在线文档编辑和管理。ckeditor是一款功能强大的JavaScript文本编辑器,支持各种格式的文本编辑;ckfinder则是一个文件...
总的来说,Ckeditor作为一个功能全面的在线编辑器,它的图片上传功能极大地提升了用户编辑体验,而实现这一功能则涉及到前端交互、后端处理、文件管理等多个方面的技术知识。正确地集成和配置Ckeditor可以为网站内容...