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.com1.著名的html编辑器,把解压后的除了samples文件夹及js文件引用到项目中即可。 把ckeditor.js文件引入到头部文件中,并写个样式类名为.ckeditor即可,里面可以为空。 放入一个textbox控件,设定它的样式为ckeditor即可。 如果放入客户端texterar元素,只要设定它的col及row和样式为ckeditor也可。2.要想用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 == "123456")){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;}
转载于:https://www.cnblogs.com/yagzh2000/p/3170919.html
12.HTML编辑器(CKEditor、CKFinder集成)相关推荐
- 网络编辑器插件ckeditor+ckfinder配置
原帖地址 另外一个 去掉编辑器的下边栏 在config.js中加入: config.removePlugins = 'elementspath'; config.resize_enabled = fa ...
- 富文本编辑器ckeditor的使用
Ckeditor下载地址:http://ckeditor.com/download 一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <sc ...
- 富文本编辑器 CKeditor 配置使用
作者:Tyler Ning 出处:http://www.cnblogs.com/tylerdonet/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...
- 富文本编辑器 CKeditor 配置使用 (带附件)
Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...
- 富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
- ckeditor+ckfinder配置用法
ckeditor+ckfinder配置用法 一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="te ...
- ckeditor+ckfinder配置
ckeditor+ckfinder配置用法 一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type=&q ...
- checkbox居中 editor_富文本编辑器ckeditor的使用
一.使用方法: 1.在页面 中引入ckeditor核心文件ckeditor.js 2.在使用编辑器的地方插入HTML控件 如果是ASP.NET环境,也可用服务器端控件 注意在控件中加上 class=& ...
- 富文本编辑器CKeditor文件上传下载SmartUpload插件
目录 富文本编辑器 1.概述 2.常用富文本编辑器 3.CKeditor介绍 4.CKeditor的使用步骤 4.1 进入官网,下载full版本(这个代表的是使用全部功能,如果是simple或者sta ...
- 富文本框让最大四百像素_富文本编辑器 CKeditor 配置使用
http://www.cnblogs.com/tylerdonet/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱 ...
最新文章
- 上海大学c语言程序设计,上海大学2009-C语言程序设计秋季学期试卷.doc
- POJ 2112 Optimal Milking(二分+最大流)
- [css] 当全国哀悼日时,怎么让整个网站变成灰色呢?
- android答辩问题,我的设计是安卓微博,答辩时老师会问些什么问题
- python pip升级报错
- Java中单例模式的几种写法
- LeetCode算法,多多路上从左到右有N棵树(编号1~N),其中第i个颗树有和谐值Ai。 多多鸡认为,如果一段连续的树,它们的和谐值之和可以被M整除,那么这个区间整体看起来就是和谐的....
- BT656视频传输标准
- 运动控制器的自定义G代码编程应用
- Pr-快速上手-基本操作-教程
- 学编程必看:10道逻辑思维测试题(附答案)
- 软件测试培训一般多少钱?
- scala异常处理、提取器(Extractor)、文件IO
- vue将文件/图片批量打包下载
- DOM初探(15)——查看视口的尺寸
- 帧率(FPS)计算的几种方法总结
- PPC气箱脉冲除尘器
- 退出telnet 命令
- 优惠加油系统定制开发卡密
- python可以制作回合制游戏么_Python制作回合制手游外挂简单教程(上)
热门文章
- 记住:永远不要在 MySQL 中使用 UTF-8
- Elasticsearch性能优化实战指南
- MySQL环境配置和入门讲解!
- 重磅!《深度学习 500 问》已更新,GitHub 标星 2.6W(附完整下载)
- LightGBM模型_相关资料整理
- AI杀入斗地主领域,快手开发DouZero对标AlphaZero,干掉344个AI获第一
- SOTA排行榜大变天!MIT研究十个CV测试集,平均错误率超3.4%
- 告别「灭霸式审稿」,IJCAI-21 的投稿者爽到家!
- 模型花费几十万美元,五年之间指导无数项目,才发现负样本用的是null?
- 手把手教你洞悉 PyTorch 模型训练过程,彻底掌握 PyTorch 项目实战!(文末重金招聘导师)...