富文本編輯器CKEditor的使用之UBB編輯器

CKEditor Ubb.jpg

一、 在前臺(tái)用戶使用的界面 要防止跨站腳本(xss)攻擊所以使用ckeditor 中的UBB模式(功能比較少)

特點(diǎn):
1將用戶設(shè)置的字體樣式信息保存成UBB編碼 ,不會(huì)引起系統(tǒng)對(duì)“<”等字符的檢測(cè),最后輸出的時(shí)候再轉(zhuǎn)回來(lái)原有html樣式;
2 這種模式不怕XSS攻擊 可以關(guān)閉安全檢測(cè)(關(guān)閉方法見(jiàn)下文) 因?yàn)樗m然有可能會(huì)將

1、在CKEditor中啟動(dòng)UBB編輯器
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CKEditorDemo.aspx.cs" Inherits="CKEditorDemo.CKEditorDemo" ValidateRequest="false" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title></title>
    <script src="CKEditor/ckeditor.js"></script>
    <script>
        function loadUbbEditor() {
            // Replace the <textarea id="CKEditorDemo"> with an CKEditor
            // instance, using the "bbcode" plugin, customizing some of the
            // editor configuration options to fit BBCode environment.
            CKEDITOR.replace('CKEditorDemo', {
                height: 280,
                // Add plugins providing functionality popular in BBCode environment.
                extraPlugins: 'bbcode,smiley,font,colorbutton',
                // Remove unused plugins.
                removePlugins: 'filebrowser,format,horizontalrule,pastetext,pastefromword,scayt,showborders,stylescombo,table,tabletools,tableselection,wsc',
                // Remove unused buttons.
                removeButtons: 'Anchor,BGColor,Font,Strike,Subscript,Superscript',
                // Width and height are not supported in the BBCode format, so object resizing is disabled.
                disableObjectResizing: true,
                // Define font sizes in percent values.
                fontSize_sizes: "30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%",
                // Strip CKEditor smileys to those commonly used in BBCode.
                smiley_images: [
                    'regular_smile.png', 'sad_smile.png', 'wink_smile.png', 'teeth_smile.png', 'tongue_smile.png',
                    'embarrassed_smile.png', 'omg_smile.png', 'whatchutalkingabout_smile.png', 'angel_smile.png',
                    'shades_smile.png', 'cry_smile.png', 'kiss.png'
                ],
                smiley_descriptions: [
                    'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'surprise',
                    'indecision', 'angel', 'cool', 'crying', 'kiss'
                ]
            });
        }
        function loadCKEditor() {
            var editor = CKEDITOR.replace('CKEditorDemo');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <textarea name="CKEditorDemo" id="CKEditorDemo">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                //loadCKEditor();
                loadUbbEditor();
            </script>
            <input type="submit" value="提交" />
        </div>
    </form>
</body>
</html>

2、獲取/設(shè)置文本區(qū)域的值
 var oEditor = CKEDITOR.instances.content;// content是文本區(qū)域ID
 var content = oEditor.getData();//取值
 oEditor.setData('abc');//設(shè)值
3、將UBB編碼轉(zhuǎn)成HTML編碼的方法(取值并前臺(tái)顯示格式的時(shí)候使用)
        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、 如果需要禁止檢測(cè)危險(xiǎn)代碼(帶<>標(biāo)簽的代碼)(只有當(dāng)使用requst[]接收的時(shí)候才會(huì)檢測(cè) 光post不接收不會(huì)檢測(cè)) 需要設(shè)置兩個(gè)地方(當(dāng)請(qǐng)求aspx及apsx.cs文件時(shí)候)/需要設(shè)置一個(gè)地方(請(qǐng)求其他文件的時(shí)候 例如ashx css 之類) 具體區(qū)別如下:

requestValidationMode 有兩個(gè)值:
2.0 僅對(duì)網(wǎng)頁(yè)啟用請(qǐng)求驗(yàn)證。是啟用還是關(guān)閉取決于 validateRequest。
4.0 默認(rèn)值。任何 HTTP 請(qǐng)求都會(huì)啟用請(qǐng)求驗(yàn)證,也就是說(shuō)不光是網(wǎng)頁(yè),還包括 Cookie 等。此 時(shí)強(qiáng)制啟用,不管 validateRequest 為何值。
由于 requestValidationMode="4.0" 是強(qiáng)制啟用,所以我們會(huì)發(fā)現(xiàn)在 .NET Framework 4.0 中僅靠設(shè)置 validateRequest 是關(guān)閉不了請(qǐng)求驗(yàn)證的,還得將 requestValidationMode 設(shè)置為 2.0。
ASP.NET中的請(qǐng)求驗(yàn)證特性提供了某一等級(jí)的保護(hù)措施防止XSS攻擊,之前版本的ASP.NET的請(qǐng)求驗(yàn)證是默認(rèn)啟動(dòng)的,但是他僅僅應(yīng)用于ASP.NET頁(yè)面中(.aspx文件和.aspx.cs文件)。
而在ASP.NET4中,請(qǐng)求驗(yàn)證默認(rèn)對(duì)所有類型的請(qǐng)求啟動(dòng),因?yàn)樗贐eginRequest被調(diào)用之前啟動(dòng),結(jié)果就是對(duì)所有資源的請(qǐng)求都要經(jīng)過(guò)請(qǐng)求驗(yàn)證,而不僅僅在.aspx文件和他們的類文件中,甚至包括web service和自定義的httphandler。同樣,在自定義httpmodules讀取http請(qǐng)求的時(shí)候,同樣要經(jīng)過(guò)請(qǐng)求驗(yàn)證。
(1)WebConfig文件中的

      <system.web>
     <httpRuntime requestValidationMode="2.0"/> 
      </system.web>

(2)需要在當(dāng)前頁(yè)面中關(guān)閉安全檢測(cè)(Webconfig中也能關(guān)閉,但是就是全局都關(guān)了,所以不這樣做 )具體代碼如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CKEditorDemo.aspx.cs" Inherits="CKEditorDemo.CKEditorDemo" ValidateRequest="false" %>

二、如果是后臺(tái) 管理員使用 沒(méi)必要使用UBB模式了

后臺(tái)可以使用CKEditor的完整模式,功能比較全,不用擔(dān)心XSS攻擊 數(shù)據(jù)直接以html編碼傳輸 (但是如果想傳輸要記得關(guān)閉以上提到的一或兩處安全檢測(cè)才能正常使用)
使用方法: 基本和上面一樣 先載入js文件ckeditor.js 然后

$(function () {
            var editor = CKEDITOR.replace('CKEditorDemo');
        })
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,569評(píng)論 19 139
  • 現(xiàn)在很多客戶也慢慢開(kāi)始注重網(wǎng)站的性能了,同時(shí)有很多運(yùn)營(yíng)網(wǎng)站的公司也不像以前那樣特別在意網(wǎng)站是否非常漂亮,而把更多的...
    小明yz閱讀 1,026評(píng)論 0 13
  • http://192.168.136.131/sqlmap/mysql/get_int.php?id=1 當(dāng)給sq...
    xuningbo閱讀 10,562評(píng)論 2 22
  • sqlmap用戶手冊(cè) 說(shuō)明:本文為轉(zhuǎn)載,對(duì)原文中一些明顯的拼寫(xiě)錯(cuò)誤進(jìn)行修正,并標(biāo)注對(duì)自己有用的信息。 ======...
    wind_飄閱讀 2,207評(píng)論 0 5
  • iOS開(kāi)發(fā)系列--網(wǎng)絡(luò)開(kāi)發(fā) 概覽 大部分應(yīng)用程序都或多或少會(huì)牽扯到網(wǎng)絡(luò)開(kāi)發(fā),例如說(shuō)新浪微博、微信等,這些應(yīng)用本身可...
    lichengjin閱讀 4,040評(píng)論 2 7

友情鏈接更多精彩內(nèi)容