2024年4月19日 星期五

[研究]ASP.NET, WebForm, 試用 Trumbowyg 1.0.1 WYSIWYG JavaScript editor 套件 (MIT)

[研究]ASP.NET, WebForm, 試用 Trumbowyg 1.0.1 WYSIWYG JavaScript editor 套件

2024-04-19

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

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

Trumbowyg 1.0.1 於 2017/10/28 釋出，無相依套件
https://github.com/jitbit/TrumbowygNuget

授權 License 是 MIT
https://github.com/jitbit/TrumbowygNuget/blob/master/LICENSE

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

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="Scripts/trumbowyg/trumbowyg.min.css" rel="stylesheet" />
    <script type="text/jscript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script type="text/jscript" src="Scripts/trumbowyg/trumbowyg.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </form>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%= TextBox1.ClientID %>').trumbowyg();
        });
    </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;
        }
    }
}




感覺怪怪的，每輸入一個英文字母，滑鼠焦點就離開文字區域，每點一下才能輸入一個英文字幕。

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

2024-10-24 再測

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>
    <link href="Scripts/trumbowyg/trumbowyg.min.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/jquery-3.7.1.min.js"></script>
    <script type="text/javascript" src="Scripts/trumbowyg/trumbowyg.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" style="height: 21px" />
    </form>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%= TextBox1.ClientID %>').trumbowyg();
        });
    </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;
        }
    }
}




********************************************************************************
2024-10-24 補

Default.aspx 如果在 DetailsView 的 <EditItemTemplate> 中，要設定 DefaultMode="Edit"

<asp:DetailsView ID="DetailsView1" runat="server" 
             DefaultMode="Edit"
            AutoGenerateRows="False" DataKeyNames="SN" DataSourceID="SqlDataSource1">
            <Fields>
                <asp:BoundField DataField="SN" HeaderText="SN" InsertVisible="False" ReadOnly="True" SortExpression="SN" />
                <asp:TemplateField HeaderText="Field1" SortExpression="Field1">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Field1") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Field1") %>'></asp:TextBox>
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("Field1") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="Field2" HeaderText="Field2" SortExpression="Field2" />
                <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowInsertButton="True" />
            </Fields>
        </asp:DetailsView>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" style="height: 21px" />
    </form>

    <script type="text/javascript">
        $(document).ready(function () {
            <%--$('#<%= TextBox1.ClientID %>').trumbowyg();--%>
            var textBox = $('#<%= DetailsView1.FindControl("TextBox1").ClientID %>');
            //if (textBox.length > 0) {
            //    textBox.trumbowyg();
            //}
            textBox.trumbowyg();
        });
    </script>

感覺怪怪的，每輸入一個英文字母，滑鼠焦點就離開文字區域，每點一下才能輸入一個英文字幕。


(完)

相關

張貼者： 於
標籤： , , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)