[研究]ASP.NET,WebForm,試用 jHtmlArea 1.0.0 WYSIWYG HTML editor 套件 (PD授權)
2024-04-19
Awesome WYSIWYG EDITORS
https://github.com/JefMari/awesome-wysiwyg-editors
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19
1.0.0 版是 2023-08-24 釋出，相依 jQuery >= 1.3.2
********************************************************************************
授權
https://github.com/JefMari/awesome-wysiwyg-editors?tab=readme-ov-file#license
https://creativecommons.org/publicdomain/zero/1.0/
********************************************************************************
********************************************************************************
NuGet 安裝 jHtmlArea 套件，jQuery 可安裝或用 CDN 的
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3.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://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>--%>
<script src="Scripts/jquery-1.4.1.min.js"></script>
<%--<link href="Content/jHtmlArea/jHtmlArea.Editor.css" rel="stylesheet" />不是，黑底，一堆黑點--%>
<%--<link href="Content/jHtmlArea/jHtmlArea.ColorPickerMenu.css" rel="stylesheet" />不是，白底，一堆黑點--%>
<link href="Content/jHtmlArea/jHtmlArea.css" rel="stylesheet" />
<script src="Scripts/jHtmlArea.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<textarea id="editor" runat="server" style="width: 100%; height: 500px;"></textarea>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
</form>
<script type="text/javascript">
//$(function () {
// $("textarea").htmlarea({
// toolbar: ["html", "|",
// "forecolor", // <-- Add the "forecolor" Toolbar Button
// "|", "bold", "italic", "underline", "|", "h1", "h2", "h3", "|", "link", "unlink"] // Overrides/Specifies the Toolbar buttons to show
// });
//});
$(document).ready(function () {
$("#editor").htmlarea({
toolbar: [
["bold", "italic", "underline", "strikethrough"],
["p", "h1", "h2", "h3", "h4", "h5", "h6"],
["link", "unlink", "image"],
["html"] // 添加 HTML 按鈕到工具欄
],
loaded: function () {
//this.toggleHtmlEditor("bold"); // 將粗體按鈕設置為按下狀態
//this.toggleView(); // 切換到 HTML 編輯視圖; 無效
}
});
});
editor.htmlarea("insertHtml", "<p>Initial content</p>"); // 設置初始內容
// 將 HTML 按鈕設置為按下狀態
//setTimeout(function () {
// editor.htmlarea("toggleHtmlEditor", "html"); //無效
//}, 0);
// 使用 execute 方法模擬點擊 HTML 按鈕
//setTimeout(function () {
// editor.htmlarea("execute", "html");//無效 |
Default.aspx.cs
using System; namespace WebApplication3
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
string content = editor.Value;
// 在此處處理編輯器的內容
}
}
} |
下圖，toolbar會在TextArea左邊，原因不明，待解決
2024-10-24 再測
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 type="text/javascript" src="Scripts/jquery-3.7.1.min.js"></script>
<link href="Content/jHtmlArea/jHtmlArea.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jHtmlArea.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" TextMode="MultiLine" Rows="10" Columns="40" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
<asp:Literal ID="Literal1" runat="server"></asp:Literal><br />
<asp:Label ID="Label1" runat="server"></asp:Label>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("#TextBox1").htmlarea({
toolbar: [
["bold", "italic", "underline", "strikethrough"],
["p", "h1", "h2", "h3", "h4", "h5", "h6"],
["link", "unlink", "image"],
["html"] // 添加 HTML 按鈕到工具欄
],
loaded: function () {
//this.toggleHtmlEditor("bold"); // 將粗體按鈕設置為按下狀態
//this.toggleView(); // 切換到 HTML 編輯視圖; 無效
}
});
});
editor.htmlarea("insertHtml", "<p>Initial content</p>"); // 設置初始內容
setTimeout(function () {
$(".jHtmlArea .toolset button[name=html]").addClass("active");//無效
}, 0);
</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)
{
string content = TextBox1.Text;
// 在此處處理編輯器的內容
Literal1.Text = content;
Label1.Text = content;
}
}
}
|
(完)
相關
沒有留言:
張貼留言