[研究]ASP.NET,WebForm,試用ckeditor 5 WYSIWYG HTML Editor
2024-04-07
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19
********************************************************************************
說明：https://cdn.ckeditor.com/ckeditor5/41.2.1/classic/
各種toolbar畫面：https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start-other.html
下面範例，只有classic出現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>
<script src="https://cdn.ckeditor.com/ckeditor5/41.2.1/classic/ckeditor.js"></script>
<%--<script src="https://cdn.ckeditor.com/ckeditor5/41.2.1/balloon/ckeditor.js"></script>--%>
<%--<script src="https://cdn.ckeditor.com/ckeditor5/41.2.1/balloon-block/ckeditor.js"></script>--%>
<%--<script src="https://cdn.ckeditor.com/ckeditor5/41.2.1/inline/ckeditor.js"></script>--%>
<%--<script src="https://cdn.ckeditor.com/ckeditor5/41.2.1/decoupled-document/ckeditor.js"></script>--%>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtarea" runat="server" ClientIDMode="Static"></asp:TextBox>
</form>
<script>
ClassicEditor.create(document.querySelector('#txtarea'))
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
|
結果
2024-04-08補測試
<%@ 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/ckeditor/contents.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/ckeditor/ckeditor.js"></script>--%>
<script type="text/javascript" src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/ckeditor.js"></script>
<%--<script type="text/javascript" src="https://cdn.ckeditor.com/4.24.0/full/ckeditor.js"></script>--%>
<%--<script type="text/javascript"src="https://cdn.ckeditor.com/4.24.0-lts/standard/ckeditor.js"></script>--%>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"></asp:TextBox>
</form>
<%-- CDN v5.24.0 成功；CDN full 或 standard v4.24.0 都沒有 toolbar--%>
<script type="text/javascript">
ClassicEditor
.create(document.querySelector('#<%= TextBox1.ClientID %>'));
<%--ClassicEditor
.create(document.querySelector('#<%= TextBox1.ClientID %>'))
.catch(error => {
console.error(error);
});--%>
</script>
<%--不管 CDN v5.24.0 或 CDN v4.24.0，下面都沒有 toolbar
<script type="text/javascript">
CKEDITOR.replace('TextBox1');
</script>--%>
</body>
</html>
|
(完)
相關
沒有留言:
張貼留言