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