[研究]ASP.NET, SummerNote 1.0.3 與 Bootstrap 3.4.1, 4.6.2, 5.3.3 相容測試
2024-10-30
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19
********************************************************************************
續
[研究]ASP.NET, 夏日筆記 Summernote 1.0.3 WYSIWYG HTML Editor 試用 (MIT)
https://shaurong.blogspot.com/2024/04/aspnetsummernote-wysiwyg-html-editor.html
********************************************************************************
NuGet 安裝 jQuery, bootstrap, summernote 等。
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>
<!-- 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>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" CssClass="summernoteCssClass" runat="server"></asp:TextBox>
</form>
</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)
{
}
}
}
|
【使用 Bootstrap 3.4.1 結果】
也就是 NuGet 說明只相依 FontAwesome >= 4.2.0，實際上不只。
官方網站
https://summernote.org/
說需要 Supports Bootstrap: 3.x.x to 5.x.x，但實際 4.6.2不行。
(完)
相關
沒有留言:
張貼留言