Ckeditor 4 複製粘貼截圖並轉化base64格式保存至數據庫

雖然Ckeditor 中自帶的有上傳圖片和文件的功能,可是有時候咱們並不須要把圖片保存至服務器的文件夾中.

反而是截圖複製粘貼,把圖片轉化爲base64格式保存在數據庫中便可知足要求.

 

1.首先下載安裝包(選擇最右邊的,完整的安裝包)

https://ckeditor.com/ckeditor-4/download/#ckeditor4

 

2.把下載的安裝包引入項目中,並在頁面中引用js

 

 

3.自定義配置文件,在文件夾中找到config.js.並配置本身所須要的

 

4.頁面使用一個textarea標籤.並給該標籤賦值id屬性.

而後初始化控件,重寫控件剪切版的複製粘貼方法.此時已配置完成.(此處注意,必定要指定重寫的控件的ckname.不然此處的重寫事件this指的將是整個頁面的全部的Ckeditor.

這樣重寫事件將會出錯.我就在此處犯了這個錯誤折騰了一個多小時....)

代碼

CKEDITOR.replace('description');
SetCKEditor("description", _self.model.Description);

function SetCKEditor(ckname, data) {
　　CKEDITOR.instances[ckname].on('instanceReady', function (event) {
　　var _data = (data || "");
　　if (_data != "") {
　　　　this.setData(HTMLEncode(_data));
　　}
　　this.document.on("paste", function (e) {//重寫該ckeditor實例的粘貼事件
　　var items = e.data.$.clipboardData.items;//獲取該ckeditor實例的全部剪切板數據
　　for (var i = 0; i < items.length; ++i) {//循環該數據並只獲取類型爲image/png格式的數據
　　　　var item = items[i];
　　　　if (item.kind == 'file' && item.type == 'image/png') {
　　　　　　var imgFile = item.getAsFile();
　　　　　　if (!imgFile) {
　　　　　　　　return true;
　　　　　　}
　　　　　　var reader = new FileReader();
　　　　　　reader.readAsDataURL(imgFile);//轉化爲base64格式
　　　　　　reader.onload = function (e) {//在控件中插入該圖片
　　　　　　CKEDITOR.instances["description"].insertHtml('<img src="' + this.result + '" alt="" />');
　　　　}
　　return false;
　　}
　　}
　　});
　　});
}

5.截圖,並在該控件的剪切板中Ctrl + V .

複製剪切的圖片並轉化爲base64格式功能已完成.可是會發現控制檯報錯

這個查了一下是由於新版ckeditor增長了雲服務，用於上傳資源用的，並且默認是開啓的，因此只須要關閉相應的插件便可解決該異常

config.removePlugins = 'easyimage,cloudservices';

 

至此Ckeditor控件的複製粘貼圖片,並轉化圖片爲base64格式已轉化完成.只需獲取控件的內容保存至數據庫便可.

 

此處也可參考

ckeditor控件的官方文檔

https://ckeditor.com/docs/ckeditor4/latest/api/index.html

這個頁面有ckeditor控件的實現原理,以及代碼

https://www.cnblogs.com/happen-/p/8350557.html

https://blog.csdn.net/jiangzeyin_/article/details/75193587