本文內容
- FineUI ckeditor
- fckeditor/ckeditor
- 演示 ckeditor 4.2.1 上傳&插入圖片
最近看了一下 FineUI_v3.3.1 控件，對里邊的 ckeditor（html 編輯）控件很感興趣，因為之前用 Ext.Net 的 htmleditor 控件時，需要一個上傳並插入圖片的功能，可是 htmleditor 本身沒有，就寫 ext js 代碼在其工具條額外增加一個按鈕完成次功能。但無論如何 htmleditor 自身實在過於簡單，沒什么意思。但 FineUI 的 ckeditor 存在 bug。於是就看研究了一下原始的 fckeditor/ckeditor 控件，這是比較嚴謹、跨瀏覽器的實現方式。
FineUI ckeditor
FineUI 解決方案目錄結構如下圖所示，包括文檔，FineUI 源代碼和示例，以及工具。
圖 1 上：FineUI目錄；中：FineUI/tools目錄，封裝ckeditor控件的項目；下：FineUI示例目錄下ckeditor支持目錄
期間發現 FineUI 因為實現方式過於草率，存在 bug，這跟它開發的方式有很大關系。如果你去看其官網演示，會發現特別像 ext js/Ext.Net，畢竟它是建立在 ext js 基礎上的，而且演示組織方式是按各個小功能點來划分，顯然有別於一般的演示。另外，針對 FineUI 封裝的 ckeditor，部分直接采用通過控件或 html 里 script 標記向客戶端輸出 iframe 加載 html 頁面，以及標記。這樣，實現雖然簡單了，但總讓人感覺不放心。調試果然發現，不是所有主流瀏覽器都能正常使用，不同的 firefox 版本也存在問題，時不時會出現變量為 null 或 undefined 的情況……說明，FineUI ckeditor 沒有控制好自己的資源。
fckeditor/ckeditor
FCKEditor 最初是以其開發者 Frederico Calderia Knabben 命名，在 2009 年更新到 3.0 時改名為 CKEditor，CK 意思“Content and Knowledge”。據官方解釋，CK 是對 FCK 的完全重寫。CKEditor 4 於2012年11月28日正式版發布，該版本全新外觀、提升代碼、即時編輯和其他諸多改進。同時，還發布了一個包含擴展中心和 CKBuilder 服務的網站，用於創建你自己的 CKEditor 版本。
看到 fck 的第一反應和聯想是，有個控件叫 ck，另一個覺得不爽的人起了一個 fck 的控件，跟 ck 功能完全一樣，意指“fuck ck”，跟人家對着干；或是剛開始的 fck 容易讓人想到 fuck，之后的版本就改掉了，呵呵~
你可以利用 CKBuilder下載自己的 ckeditor，定制想要 ckeditor的功能，包含有三方面：
- 預設置。工具條內容不同，包括基本、標准、全部。
- 插件和皮膚。ckeditor 工具欄按鈕/功能，都是以插件形式存在，頁面左邊是默認插件，右邊是其他人為 ckeditor 開發的其他插件，比如插入 googlemap 或特殊符號等等；主題有三種，自己選擇。
- 語言。各個國家的語言。
圖 2
演示 ckeditor 4.2.1 上傳&插入圖片
軟件環境
- VS 2010
解決方案結構
圖 3 本演示解決方案的結構
說明：
- 項目最好在 ckeditor 目錄下，最好不要改變。
圖 4 本演示創建的頁面和涉及的 ckeditor js 文件
其中，
- Samples\myImage.html 是本演示主頁面。
- Samples\myImageUpload.html 是本演示上傳圖片的處理程序。
- Samples\upload 目錄是上傳圖片的目錄。
- Plugins\filebrowser 目錄是 ckeditor 工具欄上文件瀏覽器插件。只要進行適當設置，就可以使用所有文件瀏覽的功能。包括“瀏覽服務器資源”(2) 和“向服務器上傳資源”(1)，資源可以是圖片，Flash。
圖 5
- Plugins\Image 目錄是 ckeditor 工具欄上圖片按鈕的插件。完成向 html 插入圖片，並對圖片進行設置。默認情況下，Image插件里邊的“瀏覽服務器”(2) 和“上傳到服務器”(1) 這兩個按鈕是隱藏的，你可以從其源代碼看出來 hidden=true。可是只要你在創建 ckeditor 時，指定了 filebrowserBrowseUrl 或 filebrowser***UploadUrl（如，filebrowserImageUploadUrl、filebrowserFlashUploadUrl 等）屬性，就可以看到這兩個按鈕，如下代碼所示：
CKEDITOR.replace('editor1', {language: 'zh',filebrowserBrowseUrl:’your handler’,filebrowserImageUploadUrl: ’your handler’});參考：cksource 文檔
Samples\myImage.html
<!DOCTYPE html>
<!--
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<title>image upload — CKEditor Sample</title>
<meta charset="utf-8">
<script src="../ckeditor.js"></script>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> » image upload
</h1>
<form method="post">
<p>
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
<script>
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace('editor1', {
language: 'zh-cn',
filebrowserImageUploadUrl: 'myImageUpload.ashx',
toolbar: [
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
['FontSize', 'TextColor', 'BGColor'],
['Image']
]
});
</script>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
</html>
說明：
- “language: ‘zh-cn’”表示 ckeditor 的語言是簡體中文。
- toolbar，是一個數組，寫法隨意，自己看看變化。本演示中是二維數組，里邊是三個一維數組，這樣，ckeditor 工具欄就分三組，如
，其中，“-”表示分隔條。
Samples\myImageUpload.html
<%@ WebHandler Language="C#" Class="myImageUpload" %>
using System;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging;
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
public class myImageUpload : IHttpHandler
{
HttpRequest httpRequest;
HttpResponse httpResponse;
string uploadDir = "upload";
public void ProcessRequest(HttpContext context)
{
httpRequest = context.Request;
httpResponse = context.Response;
string funcNum = httpRequest.QueryString["CKEditorFuncNum"];
string fileName = null;
string errorMsg = null;
string extName = string.Empty;
string fileURL = string.Empty;
string script = @"
<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction({0}, '{1}', '{2}');</script>
";
HttpPostedFile myfile = httpRequest.Files[0];
GetFileName(myfile.FileName, ref extName);
fileName = Guid.NewGuid().ToString() + "." + extName;
try
{
fileURL = uploadDir + "/" + fileName;
myfile.SaveAs(System.Web.HttpContext.Current.Server.MapPath(uploadDir) + "\\" + fileName);
errorMsg = null;
}
catch (Exception ex)
{
fileURL = null;
errorMsg = ex.Message;
}
httpResponse.Write(string.Format(script, funcNum, fileURL, errorMsg));
}
public bool IsReusable
{
get
{
return false;
}
}
private void GetFileName(string fullName, ref string extName)
{
if (fullName.IsEmpty())
{
extName = null;
}
else
{
int last;
last = fullName.LastIndexOf(@".");
extName = fullName.Substring(last + 1, fullName.Length - last - 1);
}
}
}
說明：
- ckeditor會給你指定的處理程序傳遞三個變量，本演示中，即 myImageUpload.ashx?CKEditor=editor1&CKEditorFuncNum=1&langCode=zh，其中，CKEditorFuncNum 表示最后需要調用的客戶端腳本。
運行結果：
圖 6
