asp.net CKEditor和CKFinder的应用
CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。而CKFinder是一个功能强大的ajax文件管理器。其简单的用户界面使得各类用户，不管是从高级专业人才，还是互联网初学者，都够直观、快速学习的学习使用它。
网址：
CKEditor ：http://ckeditor.com/
CKFinder ：http://ckfinder.com/
CKEditor 的使用
准备工作
1. 下载CKEditor并将其解压到Web根目录下
2. 精简目录：
_samples文件夹（示例文件，可以删除）
_source文件夹（源程序文件，可以删除）
changes.html(更新列表，可以删除)
install.html(安装指向，可以删除)
license.html(使用许可，可以删除)
CKEditor的配置（config.js文件）
详细api参数见:http://docs.cksource.com/ckeditor_api/,我的默认配置
代码如下:
// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
//配置默认配置
config.language = 'zh-cn'; //配置语言
// config.uiColor = '#FFF'; //背景颜色
// config.width = 400; //宽度
// config.height = 400; //高度
// config.skin = 'v2'; //编辑器皮肤样式
// 取消 “拖拽以改变尺寸”功能
// 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'],
// ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'],
// '/',
// ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],
// ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
// ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
// ['Link', 'Unlink', 'Anchor'],
// '/',
// ['Format', 'Font', 'FontSize'],
// ['TextColor', 'BGColor'],
// ['Maximize', 'ShowBlocks', '-', 'About']
// ];
};
CKEditor 的应用
1. 在 aspx 页面或者 master 模板页 <head> 标签中加载 ckeditor.js：
<!-- 载入 CKEditor JS 文件 -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2. 修改页面的page指令ValidateRequest="false"
<%@ Page Language="C#" ValidateRequest="false" %>
3. 在<body>标签中使用ckeditor：
<!-- 使用 ckeditor 必须定义 class="ckeditor" -->
<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine"
Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
4. 获取或设置编辑器中的内容
//获取编辑器中的内容
lblView.Text=Server.HtmlEncode( this.txtContent.Text);
//设置编辑器中的内容
//txtContent.Text = Server.HtmlDecode("<h1>设置内容</h1>");
CKFinder 的使用
准备工作
1. 下载CKFinder的Asp.NET版，将其解压到Web根目录下
2. 复制/bin/Release目录下的ckfinder.dll文件至站点bin目录
3. 精简目录：
_samples文件夹（示例文件，可以删除）
_source文件夹（源程序文件，可以删除）
CKFinder的配置
1. 打开 " \ckfinder\config.ascx "，为SetConfig方法中的 BaseUrl 指定默认路径，如：
// 以userfiles 为默认路径，其目录下会自动生成images、flash等子目录。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE：注意“ ~/ ”。
2. 与CKEditor集成
打开CKEditor目录中的config.js文件在function 函数中
代码如下:
// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
……
};
// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。
config.filebrowserBrowseUrl = location.hash + '/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = location.hash + '/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = location.hash+'/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
// config.filebrowserWindowWidth = '800';
// config.filebrowserWindowHeight = '500';
CKFinder的应用
1. 在工具栏中添加站点根目录bin目录中的ckfinder.dll控件
2. 拖放控件到Web页面
3. 修改CKFinder控件属性BasePath为ckfinder目录的相对路径
常见问题
1. 症状：因为安全原因，文件不可浏览。请联系系统管理员并检查CKFinder配置文件。
原因：未设置用户身份验证或者用户未登录。
语句：
代码如下:
public override bool CheckAuthentication()
{
return false;
}
解决：在CKFinder的config.ascx文件中修改public override bool CheckAuthentication() 加入用户身份权限验证方法。
2. 症状：未知错误
原因：设置不进行用户身份验证，但是 BaseUrl 路径不对。
语句：
代码如下:
public override bool CheckAuthentication()
{
return true ;
}
解决：在CKFinder的config.ascx文件中的public override void SetConfig() 修改
// 以userfiles 为默认路径，其目录下会自动生成images、flash等子目录。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE：注意“ ~/ ”。
3. 症状：访问带有CKFinder的页面时报错“HTTP 错误 404 - Not Found”
解决：修改CKFinder控件的BasePath属性为ckfinder目录的相对路径
相关推荐
-
Asp.net FCKEditor 2.6.3 上传文件没有权限解决方法
打开解决方案, 找到 FileBrowser/FileWorkerBase.cs 文件 复制代码 代码如下: Response.Write( @"(function(){var d=document.domain;while (true){try{var A=window.top.opener.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.d
-
ASP.NET中FCKEDITOR在线编辑器的用法
你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹中编辑器BasePath参数,如下所示: oFckeditor.BasePath="/Components/fckeditor/"; 另外,FCKEDITOR文件夹中所有以下划线开头的文件夹及文件,都是可选的,可以安全的从你的发布中删除.它们并不是编辑器运行时必需的 如何将FCKEDITOR整合进我的页面? 由于目前的版本提供的FC
-
asp.net ckeditor编辑器的使用方法
1. 下载ckeditor放到网站目录下.地址:http://ckeditor.com/ 引用js <script language="javascript" type="text/javascript" src='<%=ResolveUrl("~/ckeditor/ckeditor.js")%>'></script> 3.添加一个编辑框 <asp:TextBox ID="mckeditor&q
-
asp.net 为FCKeditor开发代码高亮插件实现代码
所以就为FCKeditor写了个InsertCode的插件.整个插件的制作过程非常简单:FCKeditor插件开发请参考FCKeditor官网的文档: http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins 首先,我们在FCKeditor/editor/plugins目录下新建一个insertcode目录,并在insertcode目录下新建一个fckplugin.js文件. 在新建的fckpl
-
ASp.net下fckeditor配置图片上传最简单的方法
1. 原先的配置 把 fckeditor/filemanager/connectors 目录删除: 有同学可能会问了,都删除了怎么上传文件? 呵呵... 2. 不要引用 FredCK.FCKeditorV2.dll; 因为我都是采用js写的,不采用控件的方式: 其实网上有很多人在尝试往 fckeditor/filemanager/connectors目录下注入, 确实也有人不小心直接把FCK编辑器没有任何配置的情况下传到网上导致中招了: 3. 现在讲正题吧,一般来说我们用FCK的时候并不多,在一
-
ASP.NET笔记之CKEditor的使用方法
1.CKEditor原名FckEditor,著名的HTML编辑器,可以在线编辑HTML内容.自己人用CKEditor,网友用UBBEditor. 配置参考文档,主要将ckeditor中的(adapters.images.lang.plugins.skins.themes.ckeditor.js.config.js.contents.css)解压到js目录,然后"显示所有文件",将ckeditor的目录"包含在项目中",在发帖页面引用ckeditor.js,然后设置多
-
asp.net+FCKeditor上传图片显示叉叉图片无法显示的问题的解决方法
弄了半天也没有找到原因,然后又重新到网上下载几个,还是不行,郁闷坏了,最后结合其他编辑器的用法,才知道是配置文件夹中上传文件夹的路径写错了 比如要上传到项目的根目录下的UserFiles下面,web.config的配置如下: 复制代码 代码如下: <appSettings> <add key="FCKeditor:BasePath" value="~/FCKeditor" /> <add key="FCKeditor:User
-
ASP.NET中CKEditor与CKFinder的配置使用
将CKEditor 与 CKFinder 的包含在项目中,并添加程序集的引用 从http://cksource.com网站上下载CKEditor与CKFinder,并将这两个解压的项目之下,里面的 samples文件夹中是示例,是不需要的可以将samples文件夹直接删除,在ckeditor和ckfinder目录下各有bin目录,添加对bin目录下的release目录下的程序集的引用 2.在需要富文本编辑器的页面注册用户控件 复制代码 代码如下: <%@ Register Assembly=&quo
-
FCKeditor ASP.NET 上传附件研究
1,安装 安装就不多说了,除了一般的那个压缩包外,ASP.NET版的FCKeditor另有一个FCKeditor.Net下载包,里面有一个Visual Studio的Solution,bin/Release里有一个FredCK.FCKeditorV2.dll文件,可以直接COPY到你的ASP.NET项目的bin文件夹里. 2,附件上传流程 FCKeditor通过在编辑界面点击Link或图片按钮打开一个模态对话框,在里面选择本地文件后上传. 这个对话框是Fckedito
-
asp.net CKEditor和CKFinder的应用
CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站.而CKFinder是一个功能强大的ajax文件管理器.其简单的用户界面使得各类用户,不管是从高级专业人才,还是互联网初学者,都够直观.快速学习的学习使用它. 网址: CKEditor :http://ckeditor.com/ CKFinder :http://ckfinder.com/ CKEditor 的使用 准备工作 1
-
网页编辑器ckeditor和ckfinder配置步骤分享
一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> <textarea id="TextArea1" cols="20" rows=&quo
-
PHP中CKEditor和CKFinder配置问题小结
1./ckeditor/config.js, 配置文件,如果不想写太多,可以直接写好默认配置(语言,菜单栏,宽度),有需要可以百度config配置 config.language = 'en':config.skin = 'v2':config.uiColor = '#AADC6E':config.toolbar = 'Basic':-. 2.官方的demo大多都喜欢用js配置editor区域,习惯写php的我就嫌麻烦,只好看内置的php类. require_once ROOTPATH . "c
-
ASP.NET配置KindEditor文本编辑器图文教程
1.什么是KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框. KindEditor 使用 JavaScript 编写,可以无缝地与 Java..NET.PHP.ASP 等程序集成,比较适合在 CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用. 2.前期准备 到官网下载最新版的KindEditor 4.11
-
Ueditor和CKeditor 两款编辑器的使用与配置方法
一丶ueditor 百度编辑器 1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html 2.百度编辑器的好:Editor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点. 3.如果想定制你想要的编辑器功能:查看官方网站的下载页面即可. 4.编辑器展示: 5.百度编辑器配置. 1.载入js,css文件 <script src="ueditor/editor_config.js"
-
修改WordPress中文章编辑器的样式的方法详解
自定义文章编辑器的样式 每一个 WordPress 主题的文章样式都是不一样的,但是在使用后台的可视化编辑器编辑文章的时候,样式却都是一致的. 但是 WordPress 提供了一个在文章可视化编辑器中自定义样式的功能,利用这个功能可以在 WordPress 可视化编辑器里自定义 CSS 样式. 把可视化编辑器的样式设置成和前端一样,可以方便用户直接预览出文章显示在前端的结果,不用刷新反复的调试文章排版样式. 在文章编辑器添加一个自定义的 CSS 样式表只需要使用 add_editor_style
-
asp中的ckEditor的详细配置小结
ckeditor的详细配置: 在网上找了好久终于找到了!O(∩_∩)O哈哈~ 一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js 复制代码 代码如下: <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> 复制代码 代码如下: <te