CKEditor4
當前版本爲CKEditor4.13.0
下載CKEditor4
- 選擇基礎組件（
Basic）
我們這裏只用到了圖片的上傳，因此選擇基礎組件
進入CKEditor4官網
![]()
2.選擇圖片上傳插件
注意⚠️：選擇File Browser
3.下載
將下載好的文件，解壓後放入對應的目錄中
引入並使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- 確保引入的CKEditor文件路徑正確 -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// 使用CKEditor替換 <textarea id="editor1">
// 實例化，使用默認配置
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
相關配置
配置插件
1.展開ckeditor目錄找到samples目錄下的index.html文件，用瀏覽器打開
2.點擊右上角的TOOLBAR CONFIGURATOR
3.勾選或者取消你想要的插件，然後點擊Get toolbar config按鈕，得到你想要的配置文件
4.複製該配置
5.找到ckeditor目錄下的config.js文件
6.將剛複製的配置，粘貼到config.js文件中
添加上傳tag
此時點擊圖片按鈕我們發現，仍然不能上傳圖片
需要在剛剛的config.js中添加兩個配置
config.extraPlugins = 'uploadimage'
config.filebrowserImageUploadUrl =
'https://192.168.0.1/api/ECategoryDetail/UploadImg'
//filebrowserImageUploadUrl 替換成你需要上傳的服務器地址
我們再次點擊圖片按鈕時候，便發現彈窗中多了上傳的tag
隱藏瀏覽服務器按鈕
我們可能無法瀏覽服務器上的圖片，當我們點擊瀏覽服務器按鈕時，可能會出現空白頁面
因此，爲了實際體驗，我們可能需要隱藏瀏覽服務器按鈕
我們根據ckeditor/plugins/image2/dialogs路徑找到image2.js文件
搜索關鍵字browseServer找到下行
label:f.lang.common.browseServer,hidden:!0
在其中添加style:"display:none"，如下：
label:f.lang.common.browseServer,style:"display:none",hidden:!0
效果如下：
上傳圖片時，如何修改上傳地址
在上面的配置裏，我們添加了一條配置用來上傳文件config.filebrowserImageUploadUrl如果不做任何修改，當我們點擊上傳到服務器時，他會默認使用該地址上傳圖片。
但這樣很不靈活，通過查看文檔，我們發現可以通過監聽事件fileUploadRequest來做上傳前的操作。
editor.on( 'fileUploadRequest', function( evt ) {
var fileLoader = evt.data.fileLoader,
formData = new FormData(),
xhr = fileLoader.xhr;
xhr.open( 'PUT', fileLoader.uploadUrl, true );
formData.append( 'upload', fileLoader.file, fileLoader.fileName );
fileLoader.xhr.send( formData );
// Prevented the default behavior.
evt.stop();
} );
修改fileLoader.uploadUrl即可，當然你也可以做其他操作，例如增加或修改消息頭。
如何修改服務器的返回結果
服務器返回的結構有時候不是我們想要的，因此，可能需要對之進行修改。通過對事件fileUploadResponse進行監聽即可。
editor.on( 'fileUploadResponse', function( evt ) {
// Prevent the default response handler.
evt.stop();
// Get XHR and response.
var data = evt.data,
xhr = data.fileLoader.xhr,
response = xhr.responseText.split( '|' );
if ( response[ 1 ] ) {
// An error occurred during upload.
data.message = response[ 1 ];
evt.cancel();
} else {
data.url = response[ 0 ];
}
} );
注意⚠️：
對其事件的監聽一般放在CKeditor實例完成後instanceReady，因此如下使用：
CKEDITOR.on('instanceReady', function(e) {
console.log('CKEDITOR初始化', e.editor)
e.editor.widgets.on('instanceCreated', function(params) {
console.log('editor創建', params)
})
var upload = e.editor.uploadRepository
upload.on('instanceCreated', function(eve) {
alert('112233')
})
e.editor.on('change', function(change) {
console.log('change', change)
})
e.editor.on( 'fileUploadRequest', function( evt ) {
console.log(evt)
}
e.editor.on( 'fileUploadResponse', function( evt ) {
console.log(evt)
}
}