當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ckeditor 4.2.1_演示 ckeditor 上传插入图片

發布時間：2025/7/14 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 ckeditor 4.2.1_演示 ckeditor 上传插入图片小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文內容

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>  <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

下載 Demo

總結

以上是生活随笔為你收集整理的ckeditor 4.2.1_演示 ckeditor 上传插入图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： malloc和new的区别是什么？
下一篇： .bat 脚本