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