[研究]ASP.NET,Summernote 1.0.3 WYSIWYG HTML Editor 試用
2024-04-09
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19
********************************************************************************
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;
}
}
}
|
(完)
相關
沒有留言:
張貼留言