浮雲雅築: Quill

顯示具有 Quill 標籤的文章。顯示所有文章

2024年11月4日星期一

[研究]ASP.NET,WebForm, 設定 Quill 2.0.0 WYSIWYG 的 toolbar 顯示全部按鈕及 Source

[研究]ASP.NET,WebForm, 設定 Quill 2.0.0 WYSIWYG 的 toolbar 顯示全部按鈕及 Source

2024-11-04

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

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

Quill - Your powerful rich text editor
https://quilljs.com/

Quill - Documentation
https://quilljs.com/docs/quickstart

Quill - Documentation - Toolbar Module
https://quilljs.com/docs/modules/toolbar

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

參考

https://quilljs.com/docs/modules/toolbar

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>
            <asp:TextBox ID="TextBox1" TextMode="MultiLine" Rows="10" Columns="40" runat="server"></asp:TextBox><br />
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /><br />
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </div>
    </form>
    <script type="text/javascript">
        var quill = new Quill('#TextBox1', {
            theme: 'snow',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                    ['blockquote', 'code-block'],
                    ['link', 'image', 'video', 'formula'],

                    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                    [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'list': 'check' }],
                    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
                    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
                    [{ 'direction': 'rtl' }],                         // text direction

                    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

                    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                    [{ 'font': [] }],
                    [{ 'align': [] }],

                    ['clean']                                         // remove formatting button
                ]
            }
        });
    </script>
</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>");
            Literal1.Text = TextBox1.Text;
        }
    }
}

有問題，版面很奇怪

表示 HTML Source Code 的 </> 按鈕按下也沒用，Rows 和 Columms 拿掉也怪

要用 <div id="editor"></div> 才行；下面都不行

<asp:TextBox ID="editor" runat="server"></asp:TextBox>

<asp:TextBox ID="editor" TextMode="MultiLine" runat="server"></asp:TextBox>

(完)

相關

[研究]ASP.NET,WebForm,試用Quill 2.0.0 WYSIWYG HTML editor 套件 (BSD)
https://shaurong.blogspot.com/2024/04/aspnetwebformquill-200-wysiwyg-html.html

[研究]ASP.NET,WebForm, 設定 Quill 2.0.0 WYSIWYG 的 toolbar 顯示全部按鈕及 Source
https://shaurong.blogspot.com/2024/11/aspnetwebform-quill-200-wysiwyg-toolbar.html

2024年4月20日星期六

[研究]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>");
        }
    }
}