[研究]ASP.NET, 顯示 jHtmlArea 1.0.0 WYSIWYG HTML editor 全部按鈕及 Source (PD授權)
2024-11-01
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19
********************************************************************************
jHtmlArea GitHub
https://github.com/crpietschmann/jHtmlArea
jHtmlArea Documentation
https://github.com/crpietschmann/jHtmlArea/wiki
所有按鈕 (ChatGPT 亂寫，實際請參考此網頁)
https://github.com/crpietschmann/jHtmlArea/wiki/Configure-jHtmlArea-Toolbar-Buttons
Add Custom jHtmlArea Toolbar Button
https://github.com/crpietschmann/jHtmlArea/wiki/Add-Custom-jHtmlArea-Toolbar-Button
續
[研究]ASP.NET,WebForm,試用 jHtmlArea 1.0.0 WYSIWYG HTML editor 套件 (PD授權)
https://shaurong.blogspot.com/2024/04/aspnetwebform-jhtmlarea-100-wysiwyg.html
[研究]ASP.NET, jHtmlArea 1.0.0 的 toolbar 有時出現 TextArea 或 TextBox 左邊之解決
https://shaurong.blogspot.com/2024/11/aspnet-jhtmlarea-100-toolbar-textarea.html
********************************************************************************
jHtmlArea 相依 jQuery >= 1.3.2，測試 jQuery 3.7.1 可用。
packages.config
<?xml version="1.0" encoding="utf-8"?> <packages> <package id="jHtmlArea" version="1.0" targetFramework="net48" /> <package id="jQuery" version="3.7.1" targetFramework="net48" /> <package id="Microsoft.CodeDom.Providers.DotNetCompilerPlatform" version="4.1.0" targetFramework="net48" /> </packages> |
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="130" 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: [
["html",
"|",
"bold",
"italic",
"underline",
"strikethrough",
"p",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"image",
"link",
"unlink",
"orderedList",
"unorderedList",
"superscript",
"subscript",
"indent",
"outdent",
"justifyleft",
"justifycenter",
"justifyright",
"increasefontsize",
"decreasefontsize",
"forecolor",
"horizontalrule"]
],
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;
}
}
}
|
實際測試，Columns="120" 時 toolbar 位置還正常，Columns="130" 就會異常。
(完)
相關
[研究]ASP.NET,WebForm,試用 jHtmlArea 1.0.0 WYSIWYG HTML editor 套件 (PD授權)
https://shaurong.blogspot.com/2024/04/aspnetwebform-jhtmlarea-100-wysiwyg.html
[研究]ASP.NET, jHtmlArea 1.0.0 的 toolbar 有時出現 TextArea 或 TextBox 左邊之解決
https://shaurong.blogspot.com/2024/11/aspnet-jhtmlarea-100-toolbar-textarea.html
[研究]ASP.NET, 顯示 jHtmlArea 1.0.0 WYSIWYG HTML editor 全部按鈕及 Source (PD授權)
https://shaurong.blogspot.com/2024/11/aspnet-jhtmlarea-100-wysiwyg-html.html
沒有留言:
張貼留言