浮雲雅築: [研究]ASP.NET,WebForm,試用Quill 2.0.0 WYSIWYG HTML editor 套件 (BSD)

[研究]ASP.NET,WebForm,試用Quill 2.0.0 WYSIWYG HTML editor 套件 (BSD)

2024-04-20、2024-11-04更新

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

官方網站：https://quilljs.com/

https://github.com/quilljs/quill/releases

目前最新2.0.0，2024-04-17釋出。

2024-11-01補，NuGet 沒看到 Quill 2.0.0。

https://www.nuget.org/packages/Quill/1.0.0-beta.1

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

註：NuGet另外有一個名稱很像的 Quill Delta

Quill Delta to HTML Converter 套件主要是用於將 Quill 編輯器的 Delta 格式（Quill 的內部數據格式）轉換成 HTML 格式的文本。這在將 Quill 編輯器中的內容儲存到資料庫或將其顯示於網頁時尤其有用。

Quill 本身是一款 WYSIWYG 編輯器，Delta 是其內部資料結構，用於記錄使用者輸入的格式化文本和操作，因此 Quill Delta to HTML Converter 可以將這些格式轉換成 HTML 以便瀏覽器識別。簡單來說，這個套件並不是編輯器本身，而是 Quill 編輯器的輔助工具，幫助將其內容轉為標準 HTML 格式便於顯示。

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

BSD 授權 License
https://quilljs.com/docs/modules/clipboard#matchers
Quill is developed and maintained by Slab. It is permissively licensed under BSD. Use it freely in personal or commercial projects!

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

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="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.snow.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="editor"></div>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
        </div>
    </form>

    <script>
        var quill = new Quill('#editor', {
            theme: 'snow'
        });
    </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 btnSubmit_Click(object sender, EventArgs e)
        {
            string quillContent = Request.Form["editor"];
            Response.Write("<script>alert('" + quillContent + "')</script>");
        }
    }
}