如何解决ckEditors UploadAdapter未设置ImageSource
我在我的网站上使用ckEditor和CostumAploadAdapter。
我想为我的WebSiteUsers创建一种电子邮件客户端。
当我在ckEditor中插入图像时,该图像通过UploadAdapter被上传到服务器,并且该图像显示在编辑器中。
但是,当我在服务器端查看发送的文本的内容时,每个图像只包含"<figure class="image"><img></figure>"
。不是图像名称或服务器上的位置。
我试图在适配器的load-Listener中显式设置imageName(仅用于测试目的),但是没有成功。
有人知道为什么上载适配器未插入正确的数据,或者我必须在何处操纵上载适配器以使其执行应做的事情?
这是我的uploadAdapter的代码:
class MyUploadAdapter {
constructor( loader ) {
// The file loader instance to use during the upload.
this.loader = loader;
}
// Starts the upload process.
upload() {
return this.loader.file
.then( file => new Promise( ( resolve,reject ) => {
this._initRequest();
this._initListeners( resolve,reject,file );
this._sendRequest( file );
} ) );
}
// Aborts the upload process.
abort() {
if ( this.xhr ) {
this.xhr.abort();
}
}
// Initializes the XMLHttpRequest object using the URL passed to the constructor.
_initRequest() {
const xhr = this.xhr = new XMLHttpRequest();
// Note that your request may look different. It is up to you and your editor
// integration to choose the right communication channel. This example uses
// a POST request with JSON as a data structure but your configuration
// Could be different.
xhr.open( 'POST','/uploadScript.PHP',true );
xhr.responseType = 'json';
}
// Initializes XMLHttpRequest listeners.
_initListeners( resolve,file ) {
const xhr = this.xhr;
const loader = this.loader;
const genericErrorText = `Couldn't upload file: ${ file.name }.`;
xhr.addEventListener( 'error',() => reject( genericErrorText ) );
xhr.addEventListener( 'abort',() => reject() );
xhr.addEventListener( 'load',() => {
const response = xhr.response.url;
// This example assumes the XHR server's "response" object will come with
// an "error" which has its own "message" that can be passed to reject()
// in the upload promise.
//
// Your integration may handle upload errors in a different way so make sure
// it is done properly. The reject() function must be called when the upload fails.
if ( !response || response.error ) {
return reject( response && response.error ? response.error.message : genericErrorText );
}
// If the upload is successful,resolve the upload promise with an object containing
// at least the "default" URL,pointing to the image on the server.
// This URL will be used to display the image in the content. Learn more in the
// UploadAdapter#upload documentation.
resolve( {
default: response
} );
} );
// Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
// properties which are used e.g. to display the upload progress bar in the editor
// user interface.
if ( xhr.upload ) {
xhr.upload.addEventListener( 'progress',evt => {
if ( evt.lengthComputable ) {
loader.uploadTotal = evt.total;
loader.uploaded = evt.loaded;
}
} );
}
}
// Prepares the data and sends the request.
_sendRequest( file ) {
// Prepare the form data.
const data = new FormData();
data.append( 'filetoUpload',file );
// Important note: This is the right place to implement security mechanisms
// like authentication and CSRF protection. For instance,you can use
// XMLHttpRequest.setRequestHeader() to set the request headers containing
// the CSRF token generated earlier by your application.
// Send the request.
this.xhr.send( data );
}
}
function MyCustomUploadAdapterPlugin( editor ) {
editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
// Configure the URL to the upload script in your back-end here!
return new MyUploadAdapter( loader );
};
}
ClassicEditor
.create( document.querySelector( '#message' ),{
extraPlugins: [ MyCustomUploadAdapterPlugin ]
} )
.catch( error => {
console.log( error );
} );
这是PHP中的uploadScript:
<?PHP
$uploaddir = "uploadImages\\";
$uploadfile = $uploaddir . ($_FILES['filetoUpload']['name']);
move_uploaded_file($_FILES['filetoUpload']['tmp_name'],$uploadfile);
echo "{\"url\":\"meer.jpg\"}";
?>
解决方法
首先验证是否上传了文件
在php中的uploadScript中: $ file_name = $ _FILES ['fileToUpload'] ['tmp_name']; echo $ file_name;
如果返回文件名,则表示文件已正确上传
我对此毫无疑问
$uploaddir = "uploadImages\\";
请更改为
$uploaddir = "uploadImages/";
希望这会有所帮助
根据ckeditor文档,您的js是正确的
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。