精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
【轉】CKeditor粘貼圖片在IE下自動上傳的研究

FCKeditor升級到3.0版本,并改名為CKeditor(Content And Knowledge),是全球最優秀的網頁在線文字編輯器之一,因其驚人的性能與可擴展性而廣泛的被運用于各大網站。相信各位都有用過。

在開發教育系統時候,很多需求需要用到富文本編輯器,我們首選也是CKeditor(國產的KindEditor也是一個不錯的選擇)。在探索教育系統時,教師是最需要考慮的用戶之一,而教師往往會有大量word文檔,往往會直接復制word內容粘貼到富文本編輯器提交內容。用過CKeditor會知道,如果word帶有圖片,粘貼到富文本編輯器里面是看不到圖片的。

本文就是研究CKeditor粘貼圖片在IE下自動上傳的功能實現。

一、粘貼圖片內容為什么不到圖片?

打開CKeditor的官網演示頁面(http://ckeditor.com/demo)。打開一個word文檔,復制文檔中有圖片和文字部分。看下圖:

粘貼到CKeditor編輯器里面,卻是顯示不出圖片,看下圖:

查看CKeditor里面的源碼可以看到,圖片的<img>里面的資源鏈接都是本地機器上的圖片,沒有權限讀取本地的圖片,提交后,此圖片鏈接也是向本地的,不是互聯網上的圖片,這就是永遠也看不到圖片了:

 

二、解決方案

1.借助IE的ActiveX插件把本地圖片轉換長BASE64碼

2.編寫CKeditor插件,取用ajax技術自動提交BASE64碼到后臺,后臺獲取BASE64碼后轉換成圖片存儲在服務器上,并返回數據到插件并把網絡圖片的URL替換原來的指向本地圖片的地址。

三、實現的技術細節

ActiveX作用

ActiveX的作用,就是提供一個方法,將圖片轉換成Base64編碼,前端JavaScript會調用此方法;ActiveX中核心方法是:

public string ImageToBase64(string ImagePath);

編寫CKeditor插件

此插件會檢測到粘貼動作,并判斷粘貼的內容是否存放本地圖片,如果存在就進行處理。JavaScript調用ActiveX插件的轉換方法,把本地圖片轉換成BASE64碼,并通過ajax提交到后臺;后臺返回真實的網絡圖片地址,插件會替換掉編輯器里面原本地圖片的連接。看代碼片斷:

/* * CKEDITOR plugin pasteuploadpic 1.0 released * SITE: http://jacken.com.cn * AUTHOR: Jacken(陳文光) * MAIL: chenjacken@gmail.com */// 處理粘貼內容var pasteService =function(evt){// 所見即所得模式,其他模式就退出if(this.mode!='wysiwyg')return;var data = evt.data['html'];// 處理html內容if(!data)return;// 檢測本地文件地址的正則表達式var localImgReg =//ig;   var imgArray = data.match(localImgReg);// 是否有本地圖片URLif(imgArray){// 上傳并處理編輯器內容 replaceEditor(uoloadPic(imgArray));   }  };if(pasteuploadpic_url){// 監聽事件 editor.on('paste', pasteService,null,null,1000);}/** * 配置處理圖片上傳的后臺地址,如果不配置,此插件不會啟用. * * @name CKEDITOR.config.pasteuploadpic_url * @type String * @default null * @since 1.0 * @example config.pasteuploadpic_url='/ckeditorAction_upload.action'; *//** * 配置ActiveXObject名稱 * * @name CKEDITOR.config.pasteuploadpic_axo * @type String * @default 'Jacken.Word' * @since 1.0 * @example config.pasteuploadpic_axo='/Jacken.Word'; */

后臺如何處理BASE64

需要編寫后臺程序來獲取BASE64碼并轉換成圖片,保存到服務器,獲得圖片的網絡絕對地址,并替換原編輯器內容的圖片src。

Java用sun.misc.BASE64Decoder().decodeBuffer(String str)來獎Base64圖片編碼轉換成字節。

PHP用base64_ decoder()。

四、已完成的功能和不足之處

在IE下借助ActiveX的功能,本人已經完成了粘貼圖片到CKeditor,圖片會自動上傳功能。

完成ActiveX的程序;

完成CKeditor插件的編寫(插件式,不影響升級CKeditor);

完成JAVA的J2EE后臺處理BASE64碼的轉換,因為老師會多次復制和粘貼同一樣內容,所以圖片文件的存儲會一定的壓力,已經完成對文件進行MD5唯一性驗證,同一樣圖片服務器上只存在一個實體圖片文件。

此實現思路可以在其他的富文本編輯器下實現,只是編寫不同的編輯器插件。

不足之處

必須要在IE下起作用,且必須安裝ActiveX插件并允許執行。

其他瀏覽器暫時不能使用此方案。

似乎只能通過復雜word里面的內容粘貼才會響應上傳。用QQ等直接截圖后粘貼不了…..

本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
thinkphp整合ckeditor編輯器使用說明
快站微信編輯器,圖片同步不受影響
網頁不能復制怎么辦?就是鼠標右鍵不可用
ckeditor3.6.5+ckfinder2.0.2+jsp編輯器配置 支持服務器瀏覽/上傳圖片、Flash
CKEditor圖片上傳實現詳細步驟(使用Struts 2)
織夢dedecms編輯器上傳圖片怎么去掉寬度和高度限制
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯系客服!

聯系客服

主站蜘蛛池模板: 龙陵县| 甘南县| 临潭县| 介休市| 甘肃省| 邵阳市| 阿拉善右旗| 东阿县| 读书| 乐昌市| 五台县| 峨眉山市| 凤阳县| 福泉市| 呼玛县| 雅江县| 化德县| 新巴尔虎左旗| 安陆市| 鄂托克旗| 澄江县| 唐山市| 宁波市| 天峨县| 孟连| 沭阳县| 黄梅县| 余庆县| 石景山区| 福清市| 祁东县| 新宁县| 郸城县| 讷河市| 稷山县| 南京市| 武宁县| 新宁县| 蚌埠市| 汶上县| 成武县|