Open ThomasBullock opened 4 years ago
The problem is that editor sends request to the current url instead of localhost:2020 as specified in the config. Can't figure out why.
The problem is that editor sends request to the current url instead of localhost:2020 as specified in the config.
Thanks for looking.
Any chance this could be a problem with nuxt config / proxies?
FWIW here's the nuxt.config.js
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: ['~/assets/style/main.scss'],
/*
** Plugins to load before mounting the App
*/
plugins: [
'~/plugins/axios.js',
'~/plugins/globalComponents.js',
{ src: '~/plugins/vue-editor.js', ssr: false },
{ src: '~/plugins/datePicker', ssr: false },
],
/*
** Nuxt.js dev-modules
*/
buildModules: [['@nuxt/typescript-build']],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
['nuxt-mq'],
'@nuxtjs/svg-sprite'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
proxy: true,
host: 'localhost',
port: '2020',
prefix: '/api'
},
/*
** Build configuration
*/
mq: {
defaultBreakpoint: 'default',
breakpoints: {
...breakpoints
}
},
svgSprite: {
// manipulate module options
},
proxy: {
'/api': {
target: 'http://localhost:2020',
changeOrigin: true
}
},
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
if (ctx.isDev) {
config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map';
}
}
},
server: {
port: 6969
},
env: {
cloudinaryName: process.env.CLOUDINARY_NAME,
cloudinaryKey: process.env.CLOUDINARY_KEY,
cloudinarySecret: process.env.CLOUDINARY_SECRET,
}
};
For some reason, the config object is not being set on editor.js.
I have the same problem, but I have fresh vue.js project(not nuxt), created via vue-cli, I can't overwrite config object. Any ideas how I can solve this problem?
I didn't solve this problem and eventually opted for another editor. https://tiptap.scrumpy.io/ Image handling was slightly different but managed to setup something workable.
Isn't there a solution?
I am having this exact same issues. It seems this plugin never use the config for image tool.
Hi i've the same issue and the solution is to use custom uploader right here editor.js custom uploader here's example of mine
import Image from '@editorjs/image'
export const EDITOR_TOOLS = {
image: {
class: Image,
config: {
// byFile: `http://localhost:8000/upload/image`,
uploader : {
async uploadByFile(file : any){
// prepare data
const data = new FormData()
data.append('image', file)
// sending data
const req = await fetch(`${process.env.api_url}/file/upload/image`, {
method: 'POST',
body: data
})
const res = await req.json()
return res
}
}
}
},
}
So, in editor.js the config uploadByFile allows to set a custom function for file upload. But the response returned by the function should be in a specified format as per the editor js documentation. Documentation link: click here
` uploadByFile(file){ // your own uploading logic here
return {
success: 1,
file: {
url: <the url you have got after uploading your file>,
// any other image data you want to store, such as width, height, color, extension, etc
}
};
});
},`
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 withInspecting 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
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??