浮雲雅築

2024年4月20日星期六

[研究]ASP.NET,WebForm,試用 jHtmlArea 1.0.0 WYSIWYG HTML editor 套件

[研究]ASP.NET,WebForm,試用 jHtmlArea 1.0.0 WYSIWYG HTML editor 套件

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

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

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");//無效

        //}, 0);

        // 使用 jQuery 將 HTML 按鈕設置為按下狀態
        setTimeout(function () {
            $(".jHtmlArea .toolset button[name=html]").addClass("active");//無效

        }, 0);
    </script>

</body>
</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年4月20日 星期六

[研究]ASP.NET,WebForm,試用 jHtmlArea 1.0.0 WYSIWYG HTML editor 套件

2024年4月20日星期六