12.HTML编辑器（CKEditor、CKFinder集成）
- CKEditor原名为FckEditor,是著名的HTML编辑器，可以在线编辑HTML内容。
- 配置参考文档：主要将ckeditor中的lang、plugins、skins、ckeditor.js、config.js、contents.css、styles.js解压后放到项目的目录下，在发贴页面引用ckeditor.js,然后设置多行文本框的class="ckeditor",代码中仍然可以通过TextBox控件的Text属性来访问编辑器的内容。
- 由于页面提交的时候asp.net会把富文本编辑器中的html内容当成攻击内容，因此需要在aspx中的Page标签中设置ValidateRequest="false"来禁用攻击检测，在2010中还要改动下配置文件（webconfig），要加入这样一句话 <httpRuntime requestValidationMode="2.0"/>。
- CKFinder是一个CKEditor插件，用来为CKEditor提供文件的上传功能。将其bin\Release下的CKFinder.dll添加到项目的引用。将core,ckfinder.html,ckfinder.js,config.ascx解压到ckfinder自己的目录。按照文档修改ckeditor的config.js,将上传的处理程序设定为ckfinder,注意路径 问题。
- 设置好上面的选项后，在插入超连接，插入图片、插入文件中都 有上传的功能。
- 因为上传文件是非常危险的动作，因此在文件上传的时候会进行权限校验。在config.ascx的CheckAuthentication方法中检验是否有权限上传，返回true表示有权限，否则没有权限，一般修改成判断用户是否登录，并且登录用户是否有上传权限，可以用Session或Membership来做，在管理方面也可以指定IP地址的用户才能上传。
- 在Setconfig函数中设置上传文件夹的位置BaseUrl、缩略图的位置。每种类型数据的上传路径、允许上传的文件类型AllowedExtensions等。
以下为说明：
http://ckeditor.com .著名的html编辑器，把解压后的除了samples文件夹及js文件引用到项目中即可。
把ckeditor.js文件引入到头部文件中，并写个样式类名为.ckeditor即可，里面可以为空。
放入一个textbox控件，设定它的样式为ckeditor即可。
如果放入客户端texterar元素，只要设定它的col及row和样式为ckeditor也可。 .要想用ckeditor中的文件上传功能，请到http://cksource.com/ckfinder/download中下载ckfinder.它和ckeditor配合才能完成
解压ckfinder文件，在项目中引用bin/release中的CKFinder.dll文件。
在项目中建立ckfinder文件夹，并把原来解压下的ckfinder文件夹中的core,ckfinder.html,ckfinder.js,config.ascx包含在项目中的ckfinder文件夹下。
打开ckeditor文件夹下的config.js文件，在CKEDITOR.editorConfig函数下面加入以下信息：（*号里面的，conpath路径的问题，是相对于网站的） *******************************************************************************************************************************
var conpath = "/js";
config.filebrowserBrowseUrl =conpath+ '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
config.filebrowserImageBrowseUrl =conpath+ '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹
config.filebrowserFlashBrowseUrl =conpath+ '/ckfinder/ckfinder.html?Type=Flash'; //上传Flash时浏览服务文件夹
config.filebrowserUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)
config.filebrowserImageUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)
config.filebrowserFlashUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
********************************************************************************************************************************* 在ckfinder文件夹下的config.ascx中可以看到CheckAuthentication()函数，这个函数主要是用来确认用户是否有权限上传文件的，一般用session来验证。
在SetConfig（） 函数中根据BaseUrl和其它字段来设定上传的文件的目录地址。 ckfinder在ie或chorm中有点问题，即向服务器传文件时会提示：文件名或文件夹名无效。
可查看http://www.cnblogs.com/windfighter/archive/2013/05/13/3076628.html重新生成dll。即可。
实例：
建立工程目录：Js目录下有ckeditor 和ckfinder两个目录，把所要的CKEditor及CKFinder文件解压到其中，再建立Library文件夹，里面放入CKFinder.dll，并引用此dll. 按照上面的提示修改EKditor中的config.js文件路径，主要是让它集成ckfinder. 建立登录页面，只有登录的用户才有上传文件的权限。并修改ckfinder中的config.ascx，修改CheckAuthentication()函数来控制权限。
登录界面HTML：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="ckeditorpro.login" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div> <asp:Label ID="Label1" runat="server" Text="用户名："></asp:Label>
<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
<br />
<asp:Label ID="Label2" runat="server" Text="用户密码："></asp:Label>
<asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="登录" />
<asp:Label ID="Label3" runat="server" Visible="False"></asp:Label> </div>
</form>
</body>
</html>
cs：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; namespace ckeditorpro
{
public partial class login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ } protected void Button1_Click(object sender, EventArgs e)
{
if ((txtuser.Text == "admin") & (txtpwd.Text == ""))
{
Session["login"] = true;
Response.Redirect("~/WebForm1.aspx");
}
else
{
Label3.Text = "登录失败";
Label3.Visible = true;
} }
}
}
WebForm1.aspx页面ckeditor的HTML源码（记着要引用ckeditor.js文件并设定textbox的css）：
<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeBehind="WebForm1.aspx.cs" Inherits="ckeditorpro.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/ckeditor/ckeditor.js" type="text/javascript"></script> </head>
<body>
<form id="form1" runat="server">
<div> <asp:TextBox ID="TextBox1" runat="server" Height="238px" CssClass="ckeditor" TextMode="MultiLine"
Width="208px"></asp:TextBox> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<textarea id="tt" cols="50" rows="20" class="ckeditor"></textarea>
</div>
</form>
</body>
</html>
修改CkEditor中的config.js文件路径：
/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/ CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
var conpath = "/js";
config.filebrowserBrowseUrl =conpath+ '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
config.filebrowserImageBrowseUrl =conpath+ '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹
config.filebrowserFlashBrowseUrl =conpath+ '/ckfinder/ckfinder.html?Type=Flash'; //上传Flash时浏览服务文件夹
config.filebrowserUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)
config.filebrowserImageUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)
config.filebrowserFlashUploadUrl =conpath+ '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; };
修改ckfinder下的config.ascx中的验证函数：
public override bool CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
//
// return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
//
// ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
// user logs on your system.
object obj=Session["login"];
if ((obj != null) & ((bool)obj) == true)
{
return true;
}
return false;
}
12.HTML编辑器（CKEditor、CKFinder集成）的更多相关文章
- CKEditor & CKFinder集成
CKEditor集成 CKEditor(原名FckEditor): 著名的HTML编辑器(可在线编辑HTML) 配置: ①将CKEditor中的(adapters images lang plugin ...
- 1.文本编辑器-->CKEditor+CKFinder使用与配置
一.CKEditor介绍 官网地址:http://ckeditor.com CKEditor下载地址:http://ckeditor.com/download CKFinder(免费版本)下载地址:h ...
- 网络编辑器插件ckeditor+ckfinder配置
原帖地址 另外一个 去掉编辑器的下边栏 在config.js中加入: config.removePlugins = 'elementspath'; config.resize_enabled = fa ...
- .Net在线编辑器：KindEditor及CkEditor+CkFinder配置说明
Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明 一.KindEditor(免费) KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所 ...
- MVC5富文本编辑器CKEditor配置CKFinder
富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- 在线编辑器CKeditor，CKfinder
在线编辑器的分类: 常见的在线编辑器有很多,比较常用的有FCKeditor(在线编辑器——Ajax 浏览器 端服务器文件管理器),CKeditor(在线编辑器与服务器端文件管理器的分离,) 其中CKe ...
- 富文本编辑器 CKeditor 配置使用 （带附件）
Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...
- 富文本编辑器 CKeditor 配置使用
作者:Tyler Ning出处:http://www.cnblogs.com/tylerdonet/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
- 富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
随机推荐
- 【POJ3182】The Grove BFS 最短路径周围
意甲冠军:给定一个N*M图.,间'X'代表树木(树木必须汇集到森林,非分离),然后,'.'它代表的空间.'*'它代表的起点.现在它需要从起点.一圈,最后回到起点,所经过最少点数. 题目中给的'+'就是 ...
- leetcode-1 Two Sum 找到数组中两数字和为指定和
问题描写叙述:在一个数组(无序)中高速找出两个数字,使得两个数字之和等于一个给定的值.如果数组中肯定存在至少一组满足要求. <剑指Offer>P214(有序数组) <编程之美& ...
- 每日一linux命令 du [系列]
http://www.cnblogs.com/peida/archive/2012/12/10/2810755.html Linux du命令也是查看使用空间的,但是与df命令不同的是Linux ...
- 廖雪锋笔记2:list,tuble
list:元素值不固定,元素类型不固定 apend(xx) insert(INDEX,xx) pop(index) 索引元素: [0] [1] [2] [-1] [-2] LIST,TUBLE变量值是 ...
- JAVA大集合数据分批次进行切割处理
今天遇到一个大集合里面的数据删除问题, 因为是一个大集合,如果同时传递到数据库,那么就会造成数据库压力 所以分批次的进行批量操作 其实 也可以采用多线程来处理或者多批次加多线程来处理都是可以的 下面的 ...
- iOS开发--通过MultipeerConnectivity完成蓝牙通讯
iOS开发–通过MultipeerConnectivity完成蓝牙通讯 iOS蓝牙通讯的三种方式: GameKit.framework:iOS7之前的蓝牙通讯框架,从iOS7开始过期,但是目前已经被淘 ...
- [转] Android学习系列(29)--App调试的几个命令实践
在Android的应用开发中,我们会用到各种代码调试:其实在Android的开发之后,我们可能会碰到一些随机的问题,如cpu过高,内存泄露等,我们无法简单的进行代码调试,我们需要一个系统日志等等,下面 ...
- 在Mac OS X下安装Android Studio
在Mac OS X下安装Android Studio只需要几步. 1. 下载Android Studio安装包(.dmg). 2. 打开Terminal输入java -version命令查看是否已安装 ...
- CakePHP之控制器
控制器 控制器是MVC中的“C”. 如果你的网站使用Cake框架制作,一般根据url地址和通过路由,就会找到正确的控制器,然后控制器的动作就会被调用. 一个控制器需要解释请求数据.确保使用正确的模型. ...
- 彻底删除mysql的方法（有隐藏文件）
1.建议使用360进行卸载,可以彻底卸载软件 2.360会提醒删除注册表 3.这个隐藏文件要删除掉 在 C:\Documents and Settings\ 路径下搜索 MySQL 文件夹(默认隐藏的 ...