Open
Description
Have implemented vue-editor-js is nuxt as per instructions and set up config as per https://github.com/ChangJoo-Park/vue-editor-js#upload-image--110 and added a backend as per https://github.com/ChangJoo-Park/vue-editor-js-imageserver
Problem is the configuration of editor image tools doesn't seem to be working.
The endpoint doesnt seem to have any effect and selecting a file initiates a POST request to my current nuxt path Request URL: http://localhost:6969/admin/post/new which responds with
Image Tool: uploading failed because of incorrect response: "<!doctype html>\n<html data-n-head-ssr>\n <head >\n <title>future-wars-nuxt</title><meta data-n-head=\"ssr\" charset=\"utf-8\"><meta data-n-head=\"ssr\" name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta data-n-head=\"ssr\" data-hid=\"description\" name=\"description\" content=\"Nuxt frontend for Future Wars\"><link data-n-head=\"ssr\" rel=\"stylesheet\"
etc etc .......
Inspecting the editor vis this.$refs I can see the configuration.tools.image is empty. Should this be displaying the config settings??
Here is my component for reference
<template>
<div class="page">
<m-form title="New Post">
<m-input name="title" label="title" v-model="title" />
<m-input name="slug" label="slug" v-model="slug" />
<m-input name="tags" label="tags" v-model="tags" />
<client-only>
<datepicker placeholder="Select Date" v-model="date"></datepicker>
</client-only>
<h1 style="text-align: center;">Editor.js on Nuxt.js</h1>
<m-button variant="primary" @click="save">Save</m-button>
<m-button variant="primary" @click="clear">Clear</m-button>
<m-button variant="secondary" @click="log">Log</m-button>
<select @change="handleTypeChange">
<option v-for="type in types" :key="type" :value="type">
{{
type
}}
</option>
</select>
<hr />
<client-only>
<editor
autofocus
:config="config"
@change="updateEditor"
@ready="editorReady"
:init-data="initData"
ref="editor"
/>
</client-only>
</m-form>
</div>
</template>
<script>
import Slugify from 'slugify';
import { postTypes } from '~/constants';
import { mapGetters, mapActions } from 'vuex';
import { editorBlocksInit } from '~/constants';
export default {
name: 'NewBlogPost',
middleware: ['check-auth', 'auth', 'is-admin'],
data() {
return {
title: 'Meh Blog',
tags: 'Stenk',
postType: postTypes[0],
date: new Date(),
initData: {
blocks: editorBlocksInit
},
author: null,
config: {
image: {
// Like in https://github.com/editor-js/image#config-params
endpoints: {
byFile: 'http://localhost:2020/api/image',
// byUrl: 'http://localhost:8090/image-by-url',
},
field: 'image',
types: 'image/*',
// Cant get this to work either
// uploader: {
// uploadByFile: this.uploadByFile
// }
},
}
};
},
computed: {
...mapGetters('auth', ['getUser']),
slug() {
return Slugify(this.title).toLowerCase();
},
types() {
return postTypes;
}
},
methods: {
...mapActions('posts', ['create']),
editorReady() {
console.log('We is ready!!!!!!');
},
updateEditor() {
console.log('change', this.$refs);
this.$refs.editor.editor.save().then(outputData => {
console.log(outputData);
this.initData.blocks = outputData.blocks;
this.initData.timeStamp = outputData.time;
this.initData.version = !this.initData.version
? outputData.version
: this.initData.version;
});
},
save() {
const createdPost = {
title: this.title,
slug: this.slug,
tags: this.tags,
isLive: false,
postType: this.postType,
author: this.getUser._id,
content: JSON.stringify(this.initData)
};
this.create({ createdPost }).then(res => {
console.log(res);
this.$router.push(`/admin/post/`);
});
},
clear() {
console.log(this);
this.$refs.editor.editor.clear();
},
log() {
console.log(this.$refs);
},
handleTypeChange(e) {
console.log(e);
this.postType = e.target.value;
},
uploadByFile(file) {
console.log('we wil upload ' + process.env.cloudinaryName)
return this.$store.dispatch('posts/uploadImage', file)
}
}
};
</script>
<style></style>
I'd ultimately like to use the uploader config prop to call a vuex action in uploadByFile but nothing in config seems to be having effect at the moment??
Metadata
Metadata
Assignees
Labels
No labels