浮雲雅築: [研究]SummerNote 0.9.0官方下載免 Bootstrap 版試用

2024年11月1日星期五

[研究]SummerNote 0.9.0官方下載免 Bootstrap 版試用

[研究]SummerNote 0.9.0官方下載免 Bootstrap 版試用

2024-10-31

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

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

https://summernote.org/getting-started/#download-source-code

參考程式 Without Bootstrap (lite)
You can use Summernote without Bootstrap using summernote-lite.js and summernote-lite.css.
https://summernote.org/getting-started/

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>
        <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>
    <link href="MyPackages/summernote-0.9.0-dist/summernote-lite.css" rel="stylesheet" />
    <script src="MyPackages/summernote-0.9.0-dist/summernote-lite.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </form>
    <script>
        $('#TextBox1').summernote({
        placeholder: 'Hello stand alone ui',
        tabsize: 2,
        height: 120,
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview', 'help']]
        ]
      });
    </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)
        {

        }
    }
}

結果