以下是一些學習和範例資料，用於了解和使用 jquery.tinymce.min.js，這些資源可以幫助你更好地掌握如何將 TinyMCE 與 jQuery 結合使用。
官方資源
TinyMCE 官方文檔
- TinyMCE 官方網站提供了詳細的文檔和範例，可以幫助你了解如何配置和使用 TinyMCE 與 jQuery 結合。
- TinyMCE 官方文檔
TinyMCE jQuery 整合指南
- 這是 TinyMCE 官方提供的專門針對 jQuery 整合的文檔，內容詳盡且有許多範例。
- jQuery Integration
在線範例和教程
CodePen
- CodePen 是一個非常好的資源，你可以在這裡找到許多關於 TinyMCE 和 jQuery 的範例代碼。
- 搜索 "TinyMCE jQuery" 或者 "jquery.tinymce.min.js" 可以找到相關的範例。
- CodePen
JSFiddle
- JSFiddle 是另一個很好的在線編輯器和分享平台，你可以找到和創建 TinyMCE 與 jQuery 的範例。
- JSFiddle
博客和文章
Dev.to
- Dev.to 上有許多開發者分享的博客和文章，涵蓋了各種技術主題，包括 TinyMCE 和 jQuery 的使用。
- 搜索 "TinyMCE jQuery" 可以找到相關的文章。
- Dev.to
Medium
- Medium 上也有許多開發者分享的文章，可以幫助你了解 TinyMCE 與 jQuery 的整合和使用。
- Medium
教學視頻
- YouTube
- YouTube 上有許多開發者錄製的教學視頻，演示了如何在不同的項目中使用 TinyMCE 和 jQuery。
- 搜索 "TinyMCE jQuery tutorial" 可以找到相關的視頻。
- YouTube
簡單範例
下面是一個簡單的範例，展示如何在 ASP.NET Core 項目中使用 jquery.tinymce.min.js。
1. 引入必要的資源
在你的視圖中引入 jQuery 和 TinyMCE：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/jquery.tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function() {
$('#mytextarea').tinymce({
language: 'zh_TW', // 設置語言為繁體中文
plugins: 'link image', // 僅啟用必要的插件
valid_elements: 'p,b,i,strong,em,a[href|title],ul,ol,li' // 僅允許這些元素和屬性
});
});
</script>
</body>
</html>
2. 設置 ASP.NET Core 控制器和視圖
創建一個控制器來處理表單提交：
csharp
using Microsoft.AspNetCore.Mvc;
public class HomeController : Controller
{
[HttpGet]
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(string content)
{
// 在這裡處理提交的內容，並執行必要的安全檢查
ViewBag.Content = content;
return View();
}
}
創建視圖 Index.cshtml：
html
@{
ViewData["Title"] = "Home Page";
}
<form method="post">
<textarea id="mytextarea" name="content">Hello, World!</textarea>
<button type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/jquery.tinymce.min.js" referrerpolicy="origin"></script>
<script>
$(document).ready(function() {
$('#mytextarea').tinymce({
language: 'zh_TW', // 設置語言為繁體中文
plugins: 'link image', // 僅啟用必要的插件
valid_elements: 'p,b,i,strong,em,a[href|title],ul,ol,li' // 僅允許這些元素和屬性
});
});
</script>
@if (ViewBag.Content != null)
{
<div>
<h2>Submitted Content</h2>
<div>@Html.Raw(ViewBag.Content)</div>
</div>
}
總結
通過這些資源和範例，你可以更深入地了解如何在 ASP.NET Core 中使用 jquery.tinymce.min.js，並確保使用過程中的安全性。如果你有任何具體的問題或需求，可以隨時查閱上述資源或尋求社區的幫助。