浮雲雅築: [研究]summernote-lite.min.js, summernote.min.js, summernote-bs4.min.js, summernote-bs5.min.js 比較試用

[研究]summernote-lite.min.js, summernote.min.js, summernote-bs4.min.js, summernote-bs5.min.js 比較試用

2024-11-04

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

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

以 libman 安裝 summernote 0.91 版

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

比較

版本	適用 Bootstrap 版本	是否需要 jQuery	是否需要 Bootstrap	說明
summernote-lite.min.js	不依賴 Bootstrap	是	否	輕量版本，無需 Bootstrap，內建樣式。
summernote.min.js	無需特定版本	是	否	通用版本，可搭配其他框架或自定樣式。
summernote-bs4.min.js	Bootstrap 4	是	是	專為 Bootstrap 4 設計，樣式適配 Bootstrap 4。
summernote-bs5.min.js	Bootstrap 5	是	是	專為 Bootstrap 5 設計，提供相容的樣式與結構。

使用建議

若已使用 Bootstrap，選擇與之相應的版本 (summernote-bs4.min.js 或 summernote-bs5.min.js)。
若未使用 Bootstrap，summernote-lite.min.js 為最佳選擇。

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

summernote-lite.min.js 版

Default.aspx

<%@ 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="lib/summernote/summernote-lite.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="lib/summernote/summernote-lite.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </form>
    <script type="text/javascript">
        $('#TextBox1').summernote({
            placeholder: 'Hello',
            tabsize: 2,
            height: 120
        });
    </script>
</body>
</html>

結果

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

summernote.min.js 版

Default.aspx

<%@ 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="lib/summernote/summernote.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="lib/summernote/summernote.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </form>
    <script type="text/javascript">
        $('#TextBox1').summernote({
            placeholder: 'Hello',
            tabsize: 2,
            height: 120
        });
    </script>
</body>
</html>

結果

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

summernote-bs4.min.js版

Default.aspx

<%@ 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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" />
    <link href="lib/summernote/summernote-bs4.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="lib/summernote/summernote-bs4.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </form>
    <script type="text/javascript">
        $('#TextBox1').summernote({
            placeholder: 'Hello',
            tabsize: 2,
            height: 120
        });
    </script>
</body>
</html>

結果

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

summernote-bs5.min.js版

Default.aspx

<%@ 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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" />
    <link href="lib/summernote/summernote-bs4.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="lib/summernote/summernote-bs4.min.js"></script>--%>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" />
    <link href="lib/summernote/summernote-bs5.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="lib/summernote/summernote-bs5.min.js"></script>

    <%--<link href="lib/summernote/summernote.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="lib/summernote/summernote.min.js"></script>--%>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </form>
    <script type="text/javascript">
        $('#TextBox1').summernote({
            placeholder: 'Hello',
            tabsize: 2,
            height: 120
        });
    </script>
</body>
</html>

結果

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

好像只有 lite 版正常，原因不明，待研究。

(完)

相關

[研究]summernote-lite.min.js, summernote.min.js, summernote-bs4.min.js, summernote-bs5.min.js 比較試用
https://shaurong.blogspot.com/2024/11/summernote-liteminjs-summernoteminjs.html

[研究]ASP.NET, SummerNote 1.0.3 與 Bootstrap 3.4.1, 4.6.2, 5.3.3 相容測試
https://shaurong.blogspot.com/2024/10/aspnet-summernote-103-bootstrap-341-462.html

[研究]ASP.NET, 夏日筆記 Summernote 1.0.3 WYSIWYG HTML Editor 試用 (MIT)
https://shaurong.blogspot.com/2024/04/aspnetsummernote-wysiwyg-html-editor.html

[研究]SummerNote 0.9.0官方下載免 Bootstrap 版試用
https://shaurong.blogspot.com/2024/11/summernote-090-bootstrap.html

[研究]SummerNote 用 NuGet 1.0.3、0.8.10, 官方 Compiled 0.9.0, Source Code 0.9.1, libman 0.9.1 安裝差異比較
https://shaurong.blogspot.com/2024/11/summernote-nuget-libman.html

浮雲雅築

2024年11月4日星期一

[研究]summernote-lite.min.js, summernote.min.js, summernote-bs4.min.js, summernote-bs5.min.js 比較試用

沒有留言:

張貼留言

2024年11月4日 星期一

[研究]summernote-lite.min.js, summernote.min.js, summernote-bs4.min.js, summernote-bs5.min.js 比較試用

沒有留言:

張貼留言

2024年11月4日星期一