Open olddeda opened 4 years ago
I have the same issue! https://github.com/ChangJoo-Park/vue-editor-js/issues/64
Tools not working, please help how to fix this
<template>
<div>
<h1>Demo</h1>
<Editor
ref="editor"
:config="config"
personality
/>
</div>
</template>
<script>
import { Editor } from 'vue-editor-js';
export default {
components: {
Editor
},
data () {
return {
config: {
personality: {
endpoints: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'
}
},
};
},
};
</script>
run npm i --save-dev @editorjs/personality
<template>
<div>
<h1>Demo</h1>
<Editor
ref="editor"
:config="config"
personality
/>
</div>
</template>
<script>
import { Editor } from 'vue-editor-js';
import Personality from '@editorjs/personality'
export default { components: { Editor }, data () { return { config: { tools: { personality: { class: Personality, config: { endpoint: 'http://localhost:8008/uploadFile' // Your backend file uploader endpoint } } } } }, }; }, };
- run
npm i --save-dev @editorjs/personality
<template> <div> <h1>Demo</h1> <Editor ref="editor" :config="config" personality /> </div> </template> <script> import { Editor } from 'vue-editor-js'; import Personality from '@editorjs/personality' export default { components: { Editor }, data () { return { config: { tools: { personality: { class: Personality, config: { endpoint: 'http://localhost:8008/uploadFile' // Your backend file uploader endpoint } } } } }, }; }, }; </script>
Thanks for the quick response. Tried this code, it is not working for me
Tried with the header option also, it is not showing anything can you please check anything wrong with this code
<template>
<div>
<h1>Demo</h1>
<Editor
ref="editor"
:config="config"
header
/>
</div>
</template>
<script>
import { Editor } from 'vue-editor-js';
import Header from '@editorjs/header';
export default {
components: {
Editor
},
data () {
return {
config: {
tools: {
header: {
class: Header,
config: {
placeholder: 'Enter a header',
levels: [ 2, 3, 4 ],
defaultLevel: 3
}
}
}
}
}
}
}
</script>
Tested you code, it works for me, not sure what's your problem...
did you installed the package? what's your package.json looks like? any error log from the console?
Tested you code, it works for me, not sure what's your problem...
did you installed the package? what's your package.json looks like? any error log from the console?
{ "name": "vue-2-webpack-4-boilerplate", "version": "1.0.0", "description": "Vue 2 application with webpack 4 boilerplate", "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --progress", "staging": "cross-env NODE_ENV=staging webpack", "build": "cross-env NODE_ENV=production webpack" }, "repository": { "type": "git", "url": "https://github.com/samteb/vue-2-webpack-4-boilerplate" }, "keywords": [ "Vue", "Webpack 4" ], "author": "samteb sam.teboul@gmail.com", "license": "MIT", "homepage": "https://github.com/samteb/vue-2-webpack-4-boilerplate", "dependencies": { "@babel/polyfill": "~7.2", "@editorjs/header": "^2.6.0", "@vue/composition-api": "^1.0.0-beta.15", "vue": "~2.6", "vue-editor-js": "^2.0.1", "vue-router": "~3.0" }, "devDependencies": { "@babel/core": "~7.2", "@babel/plugin-proposal-class-properties": "~7.3", "@babel/plugin-proposal-decorators": "~7.3", "@babel/plugin-proposal-json-strings": "~7.2", "@babel/plugin-syntax-dynamic-import": "~7.2", "@babel/plugin-syntax-import-meta": "~7.2", "@babel/preset-env": "~7.3", "@editorjs/personality": "^2.0.2", "babel-eslint": "~10.0", "babel-loader": "~8.0", "compression-webpack-plugin": "~2.0", "cross-env": "~5.2", "css-loader": "~2.1", "eslint": "~5.16", "eslint-config-standard": "~10.2", "eslint-friendly-formatter": "~3.0", "eslint-loader": "~2.1", "eslint-plugin-html": "~3.0", "eslint-plugin-import": "~2.14", "eslint-plugin-node": "~4.2", "eslint-plugin-promise": "~3.5", "eslint-plugin-standard": "~3.0", "eslint-plugin-vue": "~5.1", "friendly-errors-webpack-plugin": "~1.7", "html-webpack-plugin": "~3.2", "mini-css-extract-plugin": "~0.5", "node-sass": "~4.12", "optimize-css-assets-webpack-plugin": "~5.0", "sass-loader": "~7.1", "uglifyjs-webpack-plugin": "~1.2", "vue-loader": "~15.6", "vue-style-loader": "~4.1", "vue-template-compiler": "~2.6", "webpack": "~4.29", "webpack-bundle-analyzer": "~3.3", "webpack-cli": "~3.2", "webpack-dev-server": "~3.1", "webpack-hot-middleware": "~2.24", "webpack-merge": "~4.2" } }
My main.js
// Import Vue
import Vue from 'vue';
// import VueCompositionApi from '@vue/composition-api';
// Vue.use(VueCompositionApi);
import VueRouter from 'vue-router';
// Import Vue App, routes, store
import App from './App';
import routes from './routes';
Vue.use(VueRouter);
// Configure router
const router = new VueRouter({
routes,
linkActiveClass: 'active',
mode: 'history'
});
new Vue({
el: '#app',
render: h => h(App),
router
});
No errors in the console
Output look like this
perhaps try change to the following import Editor from 'vue-editor-js'
perhaps try change to the following import Editor from 'vue-editor-js'
After change import Editor from 'vue-editor-js' import Header from '@editorjs/header';
Error in console
<editor header list code ... :config="config"/>
no header tool