问题描述
我正在使用 VueJS3 为 CKEditor 5 实现自定义上传适配器。根据此 StackOverflow question 中提供的示例,我执行了以下操作:
- 我创建了 UploadAdapter.vue 文件(代码附在下面)
- 我在 vue 组件中导入了该文件
import UploadAdapter from '@/Shared/UploadAdapter';
- 然后我将
Uploader()
函数放置在组件的方法中,并将extraPlugins: [this.uploader]
包含在 ck 的 editorConfig 中。 (在下面找到 vue 组件的代码)
现在的问题是,当我将图像拖放到编辑器中时,我遇到了这个奇怪的错误,它告诉我 ReferenceError: $ is not defined。
google 上的所有搜索结果都指出此错误是由于缺少 jquery 引起的。这让我很困惑,因为我使用的是 vuejs 3 而不是 jquery。尽管如此,我还是使用 npm -i jquery
安装了 jquery 并将其导入到我的 vue 组件中,但仍然没有运气。
我需要帮助指出是什么触发了 ReferenceError: $ is not defined
。
这是我的 UploadAdapter.vue 文件
<script>
export default class UploadAdapter {
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();
xhr.open( 'POST','/editor/file/upload',true );
xhr.setRequestHeader('x-csrf-token',$('Meta[name="csrf-token"]').attr('content'));
//_token: '{{csrf_token()}}'
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;
if ( !response || response.error ) {
return reject( response && response.error ? response.error.message : genericErrorText );
}
resolve( {
default: response.url
} );
} );
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( 'upload',file );
// Send the request.
this.xhr.send( data );
}
}
</script>
这是我的 vue 组件
<template>
<app-layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Test Editor
</h2>
</template>
<div class="py-2 md:py-12">
<ckeditor
:editor="editor"
v-model="form.description"
:config="editorConfig"
tag-name="textarea" />
</div>
</app-layout>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import UploadAdapter from '@/Shared/UploadAdapter';
//import SimpleUploadAdapter from '@ckeditor/ckeditor5-build-classic';
export default {
components: {
ckeditor: CKEditor.component
},data() {
return {
form: this.$inertia.form({
description: '',}),editor: ClassicEditor,editorConfig: {
toolbar: [ 'heading','|','bold','italic','link','bulletedList','numberedList','insertTable','imageUpload','mediaEmbed','undo','redo' ],table: {
toolbar: [ 'tableColumn','tableRow','mergeTableCells' ]
},extraPlugins: [this.uploader],language: 'en',},}
},methods: {
uploader(editor) {
editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
return new UploadAdapter( loader );
};
},}
}
</script>
<style>
.ck-editor__editable {
min-height: 300px;
border-bottom-left-radius: 0.375rem !important;
border-bottom-right-radius: 0.375rem !important;
}
</style>
谢谢!
解决方法
您似乎正在尝试在 UpoadAdapter.vue
中使用 jQuery 从 csrf-token 元标记中选择内容。
xhr.setRequestHeader('x-csrf-token',$('meta[name="csrf-token"]').attr('content'));
你可以尝试两件事
- 将 jQuery 导入到
UploadAdapter.vue
中:(我建议在使用 Vue 时不要这样做)
import { $ } from 'jQuery';
- 使用 vanilla JS 选择 csrf-token 内容:
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
if (csrfToken) {
xhr.setRequestHeader('x-csrf-token',csrfToken);
}