富文本编辑器ckeditor的使用
2016-04-05 22:41
573 查看
一、 在前台用户使用的界面 要防止跨站脚本(xss)攻击所以使用ckeditor 中的UBB模式(功能比较少)
特点:1将用户设置的字体样式信息保存成UBB编码 ,不会引起系统对“<”等字符的检测,最后输出的时候再转回来原有html样式;2 这种模式不怕XSS攻击 可以关闭安全检测(关闭方法见下文) 因为他虽然有可能会将
$(function () { loadBBCode(); }); //加载UBB function loadBBCode() { CKEDITOR.replace('content', { extraPlugins: 'bbcode', removePlugins: 'bidi,button,dialogadvtab,div,filebrowser,flash,format,forms,horizontalrule,iframe,indent,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates', toolbar: [ ['Source', '-', 'Save', 'NewPage', '-', 'Undo', 'Redo'], ['Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['Link', 'Unlink', 'Image'], '/', ['FontSize', 'Bold', 'Italic', 'Underline'], ['NumberedList', 'BulletedList', '-', 'Blockquote'], ['TextColor', '-', 'Smiley', 'SpecialChar', '-', 'Maximize'] ], smiley_images: [ 'regular_smile.gif', 'sad_smile.gif', 'wink_smile.gif', 'teeth_smile.gif', 'tounge_smile.gif', 'embaressed_smile.gif', 'omg_smile.gif', 'whatchutalkingabout_smile.gif', 'angel_smile.gif', 'shades_smile.gif', 'cry_smile.gif', 'kiss.gif' ], smiley_descriptions: [ 'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'surprise', 'indecision', 'angel', 'cool', 'crying', 'kiss' ] });
2、获取/设置文本区域的值
var oEditor = CKEDITOR.instances.content;// content是文本区域ID var content = oEditor.getData();//取值 oEditor.setData('abc');//设值
3、将UBB编码转成HTML编码的方法(取值并前台显示格式的时候使用):
public static string UbbToHtml(string argString) { string tString = argString; if (tString != "") { Regex tRegex; bool tState = true; tString = tString.Replace("&", "&"); tString = tString.Replace(">", ">"); tString = tString.Replace("<", "<"); tString = tString.Replace("\"", """); tString = Regex.Replace(tString, @"\[br\]", "<br />", RegexOptions.IgnoreCase); string[,] tRegexAry = { {@"\[p\]([^\[]*?)\[\/p\]", "$1<br />"}, {@"\[b\]([^\[]*?)\[\/b\]", "<b>$1</b>"}, {@"\[i\]([^\[]*?)\[\/i\]", "<i>$1</i>"}, {@"\[u\]([^\[]*?)\[\/u\]", "<u>$1</u>"}, {@"\[ol\]([^\[]*?)\[\/ol\]", "<ol>$1</ol>"}, {@"\[ul\]([^\[]*?)\[\/ul\]", "<ul>$1</ul>"}, {@"\[li\]([^\[]*?)\[\/li\]", "<li>$1</li>"}, {@"\[code\]([^\[]*?)\[\/code\]", "<div class=\"ubb_code\">$1</div>"}, {@"\[quote\]([^\[]*?)\[\/quote\]", "<div class=\"ubb_quote\">$1</div>"}, {@"\[color=([^\]]*)\]([^\[]*?)\[\/color\]", "<font style=\"color: $1\">$2</font>"}, {@"\[hilitecolor=([^\]]*)\]([^\[]*?)\[\/hilitecolor\]", "<font style=\"background-color: $1\">$2</font>"}, {@"\[align=([^\]]*)\]([^\[]*?)\[\/align\]", "<div style=\"text-align: $1\">$2</div>"}, {@"\[url=([^\]]*)\]([^\[]*?)\[\/url\]", "<a href=\"$1\">$2</a>"}, {@"\[img\]([^\[]*?)\[\/img\]", "<img src=\"$1\" />"} }; while (tState) { tState = false; for (int ti = 0; ti < tRegexAry.GetLength(0); ti++) { tRegex = new Regex(tRegexAry[ti, 0], RegexOptions.IgnoreCase); if (tRegex.Match(tString).Success) { tState = true; tString = Regex.Replace(tString, tRegexAry[ti, 0], tRegexAry[ti, 1], RegexOptions.IgnoreCase); } } } } return tString; }
4、如果需要禁止检测危险代码(带<>标签的代码)(只有当使用requst[]接收的时候才会检测 光post不接收不会检测) 需要设置两个地方(当请求aspx及apsx.cs文件时候)/需要设置一个地方(请求其他文件的时候 例如ashx css 之类) 具体区别如下: requestValidationMode 有两个值: 2.0 仅对网页启用请求验证。是启用还是关闭取决于 validateRequest。 4.0 默认值。任何 HTTP 请求都会启用请求验证,也就是说不光是网页,还包括 Cookie 等。此 时强制启用,不管 validateRequest 为何值。 由于 requestValidationMode="4.0" 是强制启用,所以我们会发现在 .NET Framework 4.0 中仅靠设置 validateRequest 是关闭不了请求验证的,还得将 requestValidationMode 设置为 2.0。 ASP.NET中的请求验证特性提供了某一等级的保护措施防止XSS攻击,之前版本的ASP.NET的请求验证是默认启动的,但是他仅仅应用于ASP.NET页面中(.aspx文件和.aspx.cs文件)。 而在ASP.NET4中,请求验证默认对所有类型的请求启动,因为它在BeginRequest被调用之前启动,结果就是对所有资源的请求都要经过请求验证,而不仅仅在.aspx文件和他们的类文件中,甚至包括web service和自定义的httphandler。同样,在自定义httpmodules读取http请求的时候,同样要经过请求验证。 (1)、 WebConfig文件中的
<system.web> <httpRuntime requestValidationMode="2.0"/> </system.web>
属性 (2)需要在当前页面中关闭安全检测(Webconfig中也能关闭 但是就是全局都关了 所以不这样做 ) 具体代码如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CKEditorDemo.aspx.cs" Inherits="BookShop.Web.Test.CKEditorDemo" ValidateRequest="false" %>
添加 ValidateRequest="false" 作用是禁用当前页的安全检测 就可以提交<span><script>这一类
二 如果是后台 管理员使用 没必要使用UBB模式了
可以使用完整模式 功能比较全 不用担心XSS攻击 数据直接以html编码传输 (但是如果想传输要记得关闭以上提到的一或两处安全检测才能正常使用)
使用方法: 基本和上面一样 先载入js文件ckeditor.js 然后
$(function () { var editor = CKEDITOR.replace('txtarea'); })
相关文章推荐
- winform异型不规则界面设计的实现方法
- dedecms ckeditor编辑器添加链接默认新窗口打开的修改方法
- 为ckeditor编辑器加上传图片的功能
- CKEditor 附插入代码的插件
- 将CKfinder整合进CKEditor3.0的新方法
- Javascript实现简单的富文本编辑器附演示
- Android中设置只有程序第一次运行才显示的界面实现思路
- PHP中CKEditor和CKFinder配置问题小结
- ckeditor syntaxhighlighter代码高亮插件,完美修复
- dedecms5.5 最新版ckeditor编辑器整合教程
- SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色
- hta 实现的五子棋界面
- 关于CKeditor的非主流个性应用的设置
- CKEditor网页编辑器 中文使用说明
- asp.net CKEditor和CKFinder的应用
- android开发之欢迎界面的小例子
- C#中载入界面的常用方法
- android编程实现局部界面动态切换的方法
- Android判断现在所处界面是否为home主桌面的方法
- Android用户注册界面