步步爲營-91-富文本編輯器

時間 2019-11-20

標籤步步爲營文本編輯器简体版

原文原文鏈接

須要的文件包已經上傳到對應的百度網盤中了javascript

一：CkEdit富文本編輯器php

1:富文本編輯器須要注意的是:禁止對頁面的安全監測主要是"<>"html

a:配置webConfig文件java

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

</system.web>web

b:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CkEditDemo.aspx.cs" Inherits="BookShopManager.Web.Test.CkEditDemo" ValidateRequest="false"%>安全

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CkEditDemo.aspx.cs" Inherits="BookShopManager.Web.Test.CkEditDemo" ValidateRequest="false"%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Ckeditor/ckeditor.js"></script>
</head>
<body>
    <form id="form1" name="form1" runat="server">
    <div>
    <textarea cols="100" id="editor1" name="editor1" rows="10"></textarea>

        <script type="text/javascript">
            //<![CDATA[
            // Replace the <textarea id="editor1"> with an CKEditor instance.
            var editor = CKEDITOR.replace('editor1');
            //]]>
            
        </script>
<input type="submit" name="name" value="提交" />
    </div>
    </form>
</body>
</html>

前臺

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace BookShopManager.Web.Test
{
    public partial class CkEditDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                Response.Write(Request.Form["editor1"]);
            }
        }
    }
}

後臺

隱患:js腳本攻擊編輯器

2:UBB編輯器ide

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UBBDemo.aspx.cs" Inherits="BookShopManager.Web.Test.UBBDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="/js/jquery-1.7.1.js"></script>
    <script src="../Ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        $(function () {
            loadUBBCode();//加載UBB編輯器
        });
        //加載UBB編輯器
        function loadUBBCode() {
            CKEDITOR.replace('editor1',
    {
        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'
        ]
    });
        }
    </script>

</head>
<body>
    <form id="form1" name="form1" runat="server">
        <div>
            <textarea cols="100" id="editor1" name="editor1" rows="10"></textarea>
            <input type="submit" name="name" value="提交" />
        </div>
    </form>
</body>
</html>

前臺

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace BookShopManager.Web.Test
{
    public partial class UBBDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                Response.Write(UbbToHtml(Request.Form["editor1"]));
            }

        }
        private string UbbToHtml(string argString)
        {
            string tString = argString;
            if (tString != "")
            {
                Regex tRegex;
                bool tState = true;
                tString = tString.Replace("&", "&amp;");
                tString = tString.Replace(">", "&gt;");
                tString = tString.Replace("<", "&lt;");
                tString = tString.Replace("\"", "&quot;");
                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;
        }
    }
}

後臺

二：Kindedit 富文本編輯器ui

下載地址： http://kindeditor.net/down.php

1:簡單demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script src="/static/plugins/kindeditor/kindeditor-all.js"></script>
</head>
<body>
   <form method="POST">
    <h1>請輸入內容：</h1>
    {% csrf_token %}
    <div style="width: 500px; margin: 0 auto;">
        <textarea name="content" id="content"></textarea>
    </div>
    <input type="submit" value="提交"/>
    </form>

<script>
    $(function () {
        initKindEditor();
    });

    function initKindEditor() {
        var kind = KindEditor.create('#content', {
            width: '100%',       // 文本框寬度(能夠百分比或像素)
            height: '300px',     // 文本框高度(只能像素)
            minWidth: 200,       // 最小寬度（數字）
            minHeight: 400,      // 最小高度（數字）
        });
    }
</script>
</body>
</html>

html頁面

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。