浮雲雅築: [研究]ASP.NET, 夏日筆記 Summernote 1.0.3 WYSIWYG HTML Editor 試用 (MIT)

[研究]ASP.NET, 夏日筆記 Summernote 1.0.3 WYSIWYG HTML Editor 試用 (MIT)

2024-04-09

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

********************************************************************************

官方網站：https://summernote.org/

使用 MIT License 授權

範例：https://summernote.org/examples/

********************************************************************************

Summernote 相依套件 jQuery 和 Bootstrap 3.x ~5.x。

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
Inherits="WebApplication1.Default" %>

<!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="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

    
</head>
<body>
    <form id="form1" runat="server">
        <textarea id="summernote" name="summernote" runat="server"
            style="width: 650px; height: 250px;"></textarea>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </form>

    <script>
        $(document).ready(function () {
            $('#summernote').summernote({
                placeholder: 'Hello Bootstrap 4',
                height: 300,
                toolbar: [
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['codeview']]
                ]
            });
        });
    </script>
</body>
</html>

Default.aspx.cs

using System;

namespace WebApplication1
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = summernote.InnerText;
        }
    }
}

********************************************************************************

Summernote 相依套件 jQuery 和 Bootstrap 3.x ~5.x。

packages.config

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="bootstrap" version="5.3.3" targetFramework="net481" />
  <package id="FontAwesome" version="4.7.0" targetFramework="net481" />
  <package id="jQuery" version="3.7.1" targetFramework="net481" />
  <package id="Microsoft.CodeDom.Providers.DotNetCompilerPlatform" version="4.1.0" targetFramework="net481" />
  <package id="popper.js" version="1.16.1" targetFramework="net481" />
  <package id="summernote" version="1.0.3" targetFramework="net481" />
</packages>

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!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>
    <link href="Content/font-awesome.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.7.1.min.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.min.js"></script>
    <link href="Scripts/summernote/summernote.css" rel="stylesheet" />
    <script src="Scripts/summernote/summernote.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" TextMode="MultiLine" 
            Rows="10" Columns="80" runat="server"></asp:TextBox>
    </form>
    <script>
        $(document).ready(function () {
            $('#<%= TextBox1.ClientID %>').summernote();
        });
    </script>
</body>
</html>

Default.aspx.cs

using System;

namespace WebApplication1
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = TextBox1.InnerText;
        }
    }
}

********************************************************************************

2024-10-24 補，相依的套件、.css 和 .js 都是必須的。

font-awesome.min.css 若缺失，toolbar 的按鈕圖示會不見，如下

summernote.css 若缺失，

bootstrap.css 若缺失，如下

jquery-3.7.1.min.js 或 bootstrap.min.js 或 summernote.min.js 若缺失

height: 300, 必須，否則高度會很扁，TextBox TextMode="MultiLine Rows="20" 控制不了高度。

高度可以再改。

********************************************************************************

Default.aspx 中，若在 DetailsView1 的 <EditItemTemplate> 中，DefaultMode="Edit" 必須設定。

ValidateRequest="false" 必須。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
    Inherits="WebApplication1.Default" 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>
    <link href="Content/font-awesome.min.css" rel="stylesheet" />
    <link href="Scripts/summernote/summernote.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/jquery-3.7.1.min.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="Scripts/summernote/summernote.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Rows="10" Columns="80"></asp:TextBox><br />

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>" 
            DeleteCommand="DELETE FROM [MyTable] WHERE [SN] = @SN" 
            InsertCommand="INSERT INTO [MyTable] ([Field1], [Field2]) VALUES (@Field1, @Field2)" 
            SelectCommand="SELECT * FROM [MyTable]" 
            UpdateCommand="UPDATE [MyTable] SET [Field1] = @Field1, [Field2] = @Field2 WHERE [SN] = @SN">
            <DeleteParameters>
                <asp:Parameter Name="SN" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="Field1" Type="String" />
                <asp:Parameter Name="Field2" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="Field1" Type="String" />
                <asp:Parameter Name="Field2" Type="String" />
                <asp:Parameter Name="SN" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:DetailsView ID="DetailsView1" runat="server" 
             DefaultMode="Edit"
            AutoGenerateRows="False" DataKeyNames="SN" DataSourceID="SqlDataSource1">
            <Fields>
                <asp:BoundField DataField="SN" HeaderText="SN" InsertVisible="False" ReadOnly="True" SortExpression="SN" />
                <asp:TemplateField HeaderText="Field1" SortExpression="Field1">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Field1") %>' 
                            TextMode="MultiLine" Rows="20" Columns="80" ></asp:TextBox>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Field1") %>'></asp:TextBox>
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("Field1") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="Field2" HeaderText="Field2" SortExpression="Field2" />
                <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowInsertButton="True" />
            </Fields>
        </asp:DetailsView>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" style="height: 21px" />
    </form>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#TextBox2').summernote({
                placeholder: 'Hello World',
                height: 200,
                toolbar: [
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['codeview']]
                ]
            });

            var textBox = $('#<%= DetailsView1.FindControl("TextBox1").ClientID %>');
            textBox.summernote(
                {
                    height: 150
                }
            );
        });
    </script>
</body>
</html>

********************************************************************************

2024-10-24 補，白色底

<script type="text/javascript">
        $(document).ready(function () {
            var textBox = $('#<%= DetailsView1.FindControl("TextBox_NewsContent").ClientID %>');
            textBox.summernote({
                placeholder: '請輸入內容...',
                tabsize: 2,
                height: 150
            });
            // Set background color to white
            $('.note-editable').css('background-color', 'white');
        });
    </script>

********************************************************************************

2024-10-25 補，使用 MasterPage.master 並設定 CSS Class 的狀況

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/font-awesome.min.css" rel="stylesheet" />
    <link href="Scripts/summernote/summernote.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/jquery-3.7.1.min.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="Scripts/summernote/summernote.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".summernoteCssClass").summernote({
                placeholder: '請輸入內容...',
                tabsize: 2,
                height: 200
            });
            // Set background color to white
            $('.note-editable').css('background-color', 'white');
        });
    </script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

在 .aspx 中

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="10" Columns="80"
   CssClass="summernoteCssClass" Text='<%# Bind("HTMLContent") %>'></asp:TextBox>
<span style="color:red">註：「HTML內容」欄位，按下右上角【&lt;/&gt;】按鈕，可以檢視 HTML 原始碼。</span><br />

********************************************************************************

2024-10-25 補，預設按下 Code View 按鈕 (但敝人測試無效)

<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            height: 300, // 設置編輯器的高度
            codeviewFilter: false, // 禁用 Code View 過濾
            codeviewIframeFilter: true, // 啟用 iframe 過濾
            callbacks: {
                onInit: function() {
                    // 初始化後，直接進入 Code View 模式
                    $(this).summernote('codeview.toggle');
                }
            }
        });
    });
</script>

********************************************************************************

2024-10-30 補，優先順序

ChatGPT 說：

在 ASP.NET WebForms 應用程式中，調整 CSS 和 JavaScript 檔案的加載順序有助於避免依賴問題並優化載入速度。以下是建議的優先順序，考量依賴關係和常見的優化順序：

<!-- CSS Files -->
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link href="Scripts/summernote/summernote.css" rel="stylesheet" />

<!-- JavaScript Files -->
<script type="text/javascript" src="Scripts/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/summernote/summernote.min.js"></script>

<!-- Custom JavaScript -->
<script type="text/javascript">
    $(document).ready(function () {
        $(".summernoteCssClass").summernote({
            placeholder: '請輸入內容...',
            tabsize: 2,
            height: 200
        });
        // Set background color to white
        $('.note-editable').css('background-color', 'white');
    });
</script>

排序說明：

CSS：將 bootstrap.css 放在最前，這樣其他 CSS（如 Font Awesome 和 Summernote）可以根據 Bootstrap 設定進行增補和覆蓋。
JavaScript：將 jquery 放在最前，因為 bootstrap.min.js 和 summernote.min.js 都依賴於 jquery。
Custom JavaScript：將自訂的 JavaScript 放在最後，這樣能確保所有庫已載入並可供使用。

(完)

相關

浮雲雅築

2024年4月10日星期三

[研究]ASP.NET, 夏日筆記 Summernote 1.0.3 WYSIWYG HTML Editor 試用 (MIT)

沒有留言:

張貼留言

2024年4月10日 星期三

[研究]ASP.NET, 夏日筆記 Summernote 1.0.3 WYSIWYG HTML Editor 試用 (MIT)

沒有留言:

張貼留言

2024年4月10日星期三