[研究][ASP.NET][WebForm] FroalaEditor 3.2.0 WYSIWYG HTML Editor 試用(NuGet)
2020-09-17
WYSIWYG HTML Editor = 所見即所得 HTML 網頁編輯器
WYSIWYG = What You See Is What You Get
Web Editing Software for Better Development and UX - Froala
The Next Generation WYSIWYG HTML Editor
https://www.froala.com/wysiwyg-editor/
Buy Froala Editor
https://froala.com/wysiwyg-editor/pricing/
FAQ
https://froala.com/wysiwyg-editor/faq/
While testing, you might see an unlicensed message at the left bottom corner of the editor, however it doesn’t limit any of the editor’s features.
若不付費購買，會看到非授權使用的相關訊息。
範例
https://froala.com/wysiwyg-editor/examples/
環境：Visual Studio 2019 + ASP.NET + WebForm ( Web Application )
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FroalaEditorTest.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/froala-editor/css/froala_editor.min.css" rel="stylesheet" />
<script src="Scripts/froala-editor/js/froala_editor.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="froala-editor"></div>
</form>
<%--下面的 script 要放 body 之前，froala-editor 物件之下--%>
<script>
new FroalaEditor('div#froala-editor')
</script>
</body>
</html> |
********************************************************************************
也可寫成下面
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="5" Columns="80"></asp:TextBox>
</form>
<%--下面的 script 要放 body 之前，froala-editor 物件之下--%>
<script>
new FroalaEditor('#TextBox1')
</script> |
********************************************************************************
加上圖片 Button 功能，從右邊再拖一個 css 和 js 到程式中，成為
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Scripts/froala-editor/css/froala_editor.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/image.min.css" rel="stylesheet" />
<script src="Scripts/froala-editor/js/froala_editor.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/image.min.js"></script>
</head> |
********************************************************************************
從右邊把 lang, plugins, third_party 的 css 和 js 拖到程式中 (可一口氣選一堆)，成為
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FroalaEditorTest.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/froala-editor/css/froala_editor.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/char_counter.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/char_counter.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/code_view.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/code_view.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/colors.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/colors.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/draggable.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/draggable.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/emoticons.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/emoticons.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/file.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/file.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/files_manager.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/files_manager.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/fullscreen.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/fullscreen.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/help.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/help.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/image.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/image.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/image_manager.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/image_manager.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/line_breaker.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/line_breaker.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/quick_insert.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/quick_insert.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/special_characters.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/special_characters.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/table.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/table.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/video.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/plugins/video.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/third_party/embedly.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/third_party/embedly.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/third_party/font_awesome.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/third_party/font_awesome.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/third_party/image_tui.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/third_party/image_tui.min.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/third_party/spell_checker.css" rel="stylesheet" />
<link href="Scripts/froala-editor/css/third_party/spell_checker.min.css" rel="stylesheet" />
<script src="Scripts/froala-editor/js/froala_editor.min.js"></script>
<script src="Scripts/froala-editor/js/languages/zh_tw.js"></script>
<script src="Scripts/froala-editor/js/plugins/align.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/char_counter.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/code_beautifier.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/code_view.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/colors.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/cryptojs.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/draggable.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/edit_in_popup.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/emoticons.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/entities.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/file.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/files_manager.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/font_family.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/font_size.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/forms.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/fullscreen.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/help.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/image.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/image_manager.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/inline_class.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/inline_style.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/line_breaker.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/line_height.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/link.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/lists.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/paragraph_format.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/paragraph_style.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/print.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/quick_insert.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/quote.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/save.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/special_characters.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/table.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/url.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/video.min.js"></script>
<script src="Scripts/froala-editor/js/plugins/word_paste.min.js"></script>
<script src="Scripts/froala-editor/js/third_party/embedly.min.js"></script>
<script src="Scripts/froala-editor/js/third_party/font_awesome.min.js"></script>
<script src="Scripts/froala-editor/js/third_party/image_tui.min.js"></script>
<script src="Scripts/froala-editor/js/third_party/spell_checker.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="5" Columns="80"></asp:TextBox>
</form>
<%--下面的 script 要放 body 之前，froala-editor 物件之下--%>
<script>
new FroalaEditor('#TextBox1')
</script>
</body>
</html>
|
沒有留言:
張貼留言