ClassicEditor
.create( editorElement, {
ckfinder: {
uploadUrl: 'my_server_url'
}
} )
.then( ... )
.catch( ... );
我的服务器响应应该是什么？我在后端使用 Java。 无论我的反应是什么，它都会抛出一个对话框“无法上传文件”。
【问题讨论】：
标签： javascript ckeditor ckeditor5
成功响应：
{
"uploaded": true,
"url": "http://127.0.0.1/uploaded-image.jpeg"
}
失败响应：
{
"uploaded": false,
"error": {
"message": "could not upload this image"
}
}
【讨论】：
这是我的 Ckeditor 5 和 Phalcon 框架的代码。#products_desc 指向 textarea id。
<script>
var myEditor;
ClassicEditor
.create( document.querySelector( '#products_desc' ) ,
{
ckfinder: {
uploadUrl: 'Ckfinder/upload'
}
}
)
.then( editor => {
console.log( 'Editor was initialized', editor );
myEditor = editor;
} )
.catch( err => {
console.error( err.stack );
} );</script>
和我的 php 控制器：
<?php
use Phalcon\Mvc\Controller;
class CkfinderController extends Controller
{
public function uploadAction()
{
try {
if ($this->request->hasFiles() == true) {
$errors = []; // Store all foreseen and unforseen errors here
$fileExtensions = ['jpeg','jpg','png','gif','svg'];
$uploadDirectory = "../public/Uploads/";
$Y=date("Y");
$M=date("m");
foreach ($this->request->getUploadedFiles() as $file) {
if (in_array($file->getExtension(),$fileExtensions)) {
if($file->getSize()<2000000)
{
if (!file_exists($uploadDirectory.$Y)) {
mkdir($uploadDirectory.$Y, 0777, true);
}
if (!file_exists($uploadDirectory.$Y.'/'.$M)) {
mkdir($uploadDirectory.$Y.'/'.$M, 0777, true);
}
$namenew=md5($file->getName().time()).'.'.$file->getExtension();
$uploadDirectory .=$Y.'/'.$M.'/';
$file->moveTo($uploadDirectory.$namenew);
}
else{
$errors[] = "This file is more than 2MB. Sorry, it has to be less than or equal to 2MB";
}
}
else{$errors[] = "This file extension is not allowed. Please upload a JPEG ,svg,gif,,jpg,PNG file";}
if(empty($errors))
{
echo '{
"uploaded": true,
"url": "http://localhost/cms/public/Uploads/'.$Y.'/'.$M.'/'.$namenew.'"}';
}
else{
echo '{
"uploaded": false,
"error": {
"message": "could not upload this image1"
}';}
}
}
else{
echo '{
"uploaded": false,
"error": {
"message": "could not upload this image1"
}';}
}
catch (\Exception $e) {
echo '{
"uploaded": false,
"error": {
"message": "could not upload this image0"
}';
}
}
}
?>
【讨论】：
class UploadAdapter {
constructor( loader ) {
this.loader = loader;
this.upload = this.upload.bind(this)
this.abort = this.abort.bind(this)
}
upload() {
const data = new FormData();
data.append('typeOption', 'upload_image');
data.append('file', this.loader.file);
return axios({
url: `${API}forums`,
method: 'post',
data,
headers: {
'Authorization': tokenCopyPaste()
},
withCredentials: true
}).then(res => {
console.log(res)
var resData = res.data;
resData.default = resData.url;
return resData;
}).catch(error => {
console.log(error)
return Promise.reject(error)
});
}
abort() {
// Reject promise returned from upload() method.
}
}
<CKEditor
editor={ ClassicEditor }
data="<p>Hello from CKEditor 5!</p>"
config={{}}
onInit={ editor => {
editor.ui.view.editable.element.style.height = '200px';
editor.plugins.get( 'FileRepository' ).createUploadAdapter = function( loader ) {
return new UploadAdapter( loader );
};
} }
onChange={ ( event, editor ) => {
console.log(editor.getData())
} }
/>
【讨论】：
我在 React 中的操作方式应该类似。我有为此的自定义上传器。
UploadAdapter.js
// Custom Upload Adapter
export class UploadAdapter {
constructor(loader) {
this.loader = loader
}
async upload() {
return this.loader.file.then((file) => {
const data = new FormData()
data.append("file", file)
const genericError = `Couldn't upload file: ${file.name}.`
return axios({
data,
method: "POST",
url: "API_UPLOAD_URL",
headers: {
"Content-Type": "multipart/form-data",
},
onUploadProgress: (progressEvent) => {
loader.uploadTotal = progressEvent.total
loader.uploaded = progressEvent.loaded
const uploadPercentage = parseInt(
Math.round((progressEvent.loaded / progressEvent.total) * 100)
)
},
})
.then(({ data }) => ({ default: data.url }))
.catch(({ error }) => Promise.reject(error?.message ?? genericError))
})
}
abort() {
return Promise.reject()
}
}
// CKEditor FileRepository
export function uploadAdapterPlugin(editor) {
editor.plugins.get("FileRepository").createUploadAdapter = (loader) =>
new UploadAdapter(loader)
}
使用上面的：
const CustomEditor = () => (
<CKEditor
editor={ClassicEditor}
data="<p>Hello from CKEditor 5!</p>"
config={{}}
onInit={(editor) => {
editor.ui.view.editable.element.style.height = "200px"
uploadAdapterPlugin(editor)
}}
onChange={(event, editor) => {
console.log(editor.getData())
}}
/>
)
【讨论】：
ckfinder.uploadUrl 属性配置CKFinderUploadAdapter 插件。该插件负责与CKFinder's server-side connector的通信。
因此，换句话说，您的服务器应该运行 CKFinder 的服务器端连接器。这是一个专有软件，所以我不会深入探讨它的工作原理。
如果您想了解配置图片上传的所有方法，请阅读How to enable image upload support in CKEditor 5?。
【讨论】：
uploadUrl。这将允许拖放上传。手册可以在这里找到：docs-old.ckeditor.com/CKFinder_2.x/Developers_Guide/Java。 CKFinder for Java 可以从这里下载 - ckeditor.com/ckeditor-4/download/#ckfinder。
可以配置CKEditor上传文件
ClassicEditor.create(document.querySelector('#editor'), {
cloudServices: {
tokenUrl: 'https://example.com/cs-token-endpoint',
uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
}
} )
.then( ... )
.catch( ... );
欲了解更多详情，请访问此链接：https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html
【讨论】：