步步为营-91-富文本编辑器

Posted 2020-10-08 逍遥小天狼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了步步为营-91-富文本编辑器相关的知识，希望对你有一定的参考价值。

需要的文件包已经上传到对应的百度网盘中了

一：CkEdit富文本编辑器

1:富文本编辑器需要注意的是:禁止对页面的安全监测主要是"<>"

a:配置webConfig文件

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

</system.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编辑器

<%@ 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 富文本编辑器

下载地址： 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页面

以上是关于步步为营-91-富文本编辑器的主要内容，如果未能解决你的问题，请参考以下文章

轻量级富文本编辑器quill editor结合iview的使用

谁会将富文本编辑器代码插入到html页面中

富文本编辑器代码编辑实时高亮

2016-6-5富文本编辑器

为啥在div里面做富文本编辑没有作用

从 HTML 正文中提取文本片段（在 .NET 中）