浮雲雅築: [研究]ASP.NET, 顯示 jHtmlArea 1.0.0 WYSIWYG HTML editor 全部按鈕及 Source (PD授權)

[研究]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" 就會異常。

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

2024-11-04補

註：NuGet 目前只提供 1.0.0，但官方到 1.0.1，1.0.1解決了toolbar和填寫框寬度不一致問題

https://github.com/crpietschmann/jHtmlArea

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://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <!-- jHtmlArea Compontent -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/crpietschmann/jHtmlArea@v1.0.1/dist/css/jHtmlArea.css">
    <script src="https://cdn.jsdelivr.net/gh/crpietschmann/jHtmlArea@1.0.1/dist/js/jHtmlArea.min.js"></script>

    <!-- jHtmlArea Color Picker Menu -->
    <%--<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/crpietschmann/jHtmlArea@v1.0.1/dist/css/jHtmlArea.ColorPickerMenu.css">
    <script src="https://cdn.jsdelivr.net/gh/crpietschmann/jHtmlArea@1.0.1/dist/js/jHtmlArea.ColorPickerMenu.min.js"></script>--%>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" TextMode="MultiLine" Rows="10" Columns="100" 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>

Columns="80" 約比 toolbar 略大一點。

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

(完)

相關

[研究]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

浮雲雅築

2024年11月1日星期五

[研究]ASP.NET, 顯示 jHtmlArea 1.0.0 WYSIWYG HTML editor 全部按鈕及 Source (PD授權)

沒有留言:

張貼留言

2024年11月1日 星期五

[研究]ASP.NET, 顯示 jHtmlArea 1.0.0 WYSIWYG HTML editor 全部按鈕及 Source (PD授權)

沒有留言:

張貼留言

2024年11月1日星期五