2018年6月7日 星期四

[研究][ASP.NET][JavaScript] ckeditor-full v4.9.2 WYSIWYG HTML editor 試用(NuGet安裝)

[研究][ASP.NET][JavaScript] ckeditor-full v4.9.2 WYSIWYG HTML editor 試用(NuGet安裝)

2018-06-07

CKEditor 是很有名的 Web-based Word-Like 套件、WYSIWYG 網頁內容編輯器。
官方網站
https://ckeditor.com/


(下圖) 官方目前主要是 v4 和 v5











參考

Adding CKEditor to Your Page
http://docs.ckeditor.com/#!/guide/dev_installation




<textarea> 是 HTML 語法，用 ASP.NET 元件方法如下：
<asp:TextBox ID="TextBox1″ runat="server" TextMode="MultiLine" Height="200px" Width="600px"></asp:TextBox>

因為輸入內容包含 HTML Tag，可能會因為  ASP.NET 安全機制被攔截或拒絕，可在該 網頁做修改 (上面範例是 Default.aspx )，增加 ValidateRequest="False"
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"  ValidateRequest="False"   %>

在送出的按鈕，要對欄位內容作編碼：
protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = HttpUtility.HtmlEncode(TextBox1.Text);
}

完整

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CKEditorImageUploadTest.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>
    <script src="Scripts/ckeditor/ckeditor.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Height="200px" Width="200px"></asp:TextBox><br />
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
            <br />
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <script type="text/javascript">
                CKEDITOR.replace('TextBox1');
            </script>
        </div>
    </form>
</body>
</html>



或改用 CssClass

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CKEditorImageUploadTest.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>
    <script src="Scripts/ckeditor/ckeditor.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" CssClass="ckeditor" runat="server" TextMode="MultiLine" Height="200px" Width="200px"></asp:TextBox><br />
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
            <br />
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
    </form>
</body>
</html>



(下圖) 原始的 CKEditor 的「圖像」按鈕，只能設定要顯示的圖片 URL，沒有上傳功能。







如果要可以上傳圖片，可搭配 CKFinder，有空再說。

網路上有很多篇 CKFinder 是 2.x 的，和 CKFinder 3.x 用法差異很大，可能要直接看官方文件。
而且 CKFinder 是付費的 Add-ons，不是免費的。
https://ckeditor.com/pricing/

CKFinder 3 ASP.NET Connector: Quick Start Guide - Installation with NuGet Packages
https://ckeditor.com/docs/ckfinder/ckfinder3-net/quickstart.html#quickstart_installation_nuget
( 感覺用起來很累，太複雜了 )

CKFinder Demo
https://ckeditor.com/ckfinder/demo/

CKFinder 3 .Net 版本安裝失敗小筆記 – 要改的地方太多了，那就改天吧

CKFinder 3 ASP.NET Connector: Quick Start Guide

Website Integration - CKFinder 3 Documentation

(完)


相關

[研究] NuGet 安裝的 CKEditor 版本比較
http://shaurong.blogspot.com/2018/06/nuget-ckeditor.html

[研究][ASP.NET][JavaScript] ckeditor-full v4.9.2 試用(NuGet安裝)
http://shaurong.blogspot.com/2018/06/aspnetjavascript-ckeditor-full-v492.html

[研究][JavaScript] CKeditor 4.9.1 與 Fortify SCA v17.20
http://shaurong.blogspot.com/2018/04/javascript-ckeditor-491-fortify-sca.html

[研究][ASP.NET][JavaScript] ckeditor v3.6.4試用 (NuGet 安裝)
http://shaurong.blogspot.com/2018/06/aspnetjavascript-ckeditor-v364-nuget.html

[研究][ASP.NET][JavaScript] CkeditorForASP.NET v3.6.4試用 (NuGet安裝)
http://shaurong.blogspot.com/2018/06/aspnetjavascript-ckeditorforaspnet-v364.html

[研究][ASP.NET] CKEditor.NET 1.0.0 試用 (NuGet安裝)
http://shaurong.blogspot.com/2018/06/aspnet-ckeditornet-100-nuget.html

[研究] [C#] [ASP.NET] ckeditor-full 4.6.1 安裝 (NuGet) 與使用
http://shaurong.blogspot.com/2017/01/c-aspnet-ckeditor-full-461-nuget.html


張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)