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文件，用浏览器打开
index.html
2.点击右上角的TOOLBAR CONFIGURATOR
TOOLBAR CONFIGURATOR
3.勾选或者取消你想要的插件，然后点击Get toolbar config按钮，得到你想要的配置文件
Get toolbar config
4.复制该配置
配置文件
5.找到ckeditor目录下的config.js文件
config.js
6.将刚复制的配置，粘贴到config.js文件中
添加上传tag
此时点击图片按钮我们发现，仍然不能上传图片
无法上传图片
需要在刚刚的config.js中添加两个配置
config.extraPlugins = 'uploadimage'
config.filebrowserImageUploadUrl =
'https://192.168.0.1/api/ECategoryDetail/UploadImg'
//filebrowserImageUploadUrl 替换成你需要上传的服务器地址
添加配置
我们再次点击图片按钮时候，便发现弹窗中多了上传的tag
上传按钮
隐藏浏览服务器按钮
浏览服务器按钮
我们可能无法浏览服务器上的图片，当我们点击浏览服务器按钮时，可能会出现空白页面
空白页
因此，为了实际体验，我们可能需要隐藏浏览服务器按钮
image2.js
我们根据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)
}
}
网友评论