I'm new to vue.js. Integrated CKEditor successfully but having trouble to integrate CKFinder in it. I'm trying to Import CKFinder in CKEditor component but I'm getting an error.
CKEditor-Vue Component:
<template>
<ckeditor :editor="editor" :value="defaultValue"
#input="editorInput" :disabled="disabled" :config="editorConfig"></ckeditor>
</template>
<script>
import DecoupledEditor from '#ckeditor/ckeditor5-build-decoupled-document';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder'
export default {
name: "Editor",
props: {
defaultValue: String,
disabled: Boolean
},
data() {
return {
editor: DecoupledEditor,
editorConfig: {
plugins: [
CKFinder
]
}
}
},
methods: {
editorInput(e) {
this.$emit('getEditorData', e);
}
}
}
</script>
<style scoped>
</style>
When I try to import CKFinder it's showing ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.. Screenshot:
Am I doing anything wrong? Do you have any integration guide or correction on my component?
Thanks in advance for helping me.
You don't have to import
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder'
because it is already included in the build of your choice. You only need to configure it and the error should disappear.
To make it clear like what oleq mean, just make a config under the editorConfig like this. You don't need to import it.
<script>
import DecoupledEditor from '#ckeditor/ckeditor5-build-decoupled-document';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder'
export default {
name: "Editor",
props: {
defaultValue: String,
disabled: Boolean
},
data() {
return {
editor: DecoupledEditor,
editorConfig: {
plugins: [
ckfinder: {
uploadUrl:
'/ckfinder/connector?command=QuickUpload&type=Files&responseType=json',
filebrowserBrowseUrl: '/ckfinder/browser',
filebrowserImageBrowseUrl: '/ckfinder/browser?type=Images',
filebrowserUploadUrl:'/ckfinder/connector?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images'
}
]
}
}
},
methods: {
editorInput(e) {
this.$emit('getEditorData', e);
}
}
}
</script>
Related
Hi to all i want to find a way to see if user in my webapp is online or offline and run always! If user is offline wait 10 seconds to see if come back online and if not run a function!
Thanks all for the help!
Create a component OfflineComponent.vue like this:
<template>
<div>Offline component after 5 seconds!</div>
</template>
<script>
export default {
data() {
return {
showOnce: false,
}
},
mounted() {
this.startInterval()
},
methods: {
startInterval() {
window.setInterval(() => {
if (this.$nuxt.isOffline && !this.showOnce) {
this.runThisFunc()
this.showOnce = true
}
if (this.showOnce) {
clearInterval(window)
}
}, 5000)
},
runThisFunc() {
console.log('OFFLINE!')
},
},
}
</script>
Now import it inside the page you want. I use the main page:
<template>
<div v-if="$nuxt.isOffline">
<offline-component></offline-component>
</div>
<div v-else>You are Online!</div>
</template>
<script>
import OfflineComponent from '~/components/offlineComponent.vue'
export default {
name: 'IndexPage',
components: {
OfflineComponent,
},
}
</script>
I have installed vuelidate 2 to validate forms in my NuxtJS project. I followed instructions for installation and setup step by step according to vuelidate documentation. This is how my setup files look until now:
package.json
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"#vue/composition-api": "^1.2.2",
"#vuelidate/core": "^2.0.0-alpha.26",
"#vuelidate/validators": "^2.0.0-alpha.22",
"cookie-universal-nuxt": "^2.1.5",
"core-js": "^3.15.1",
"nuxt": "^2.15.7",
"uikit": "^3.7.1"
}
plugins/composition-api.js
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
and nuxt.config.js for #vue/composition-api
plugins: [
{ src: '~/plugins/composition-api.js' }
]
and finally this is how I'm using vuelidate inside my component:
<script>
import useVuelidate from '#vuelidate/core'
import { required } from '#vuelidate/validators'
export default {
setup () {
return { v$: useVuelidate() }
},
data () {
return {
contact: {
name: ''
}
}
},
validations () {
return {
contact: {
name: { required }
}
}
},
methods: {
submitForm () {
this.v$.$validate()
.then((isFormValid) => {
if (isFormValid) {
console.log('valid!!!')
} else {
return false
}
})
},
}
}
</script>
<template>
<label>
<input v-model="contact.name">
<div v-if="v$.contact.name.$error">Name is required.</div>
</label>
</template>
These are a couple of problems that occur:
when I place v-if="v$.contact.name.$error" inside template I get the error Cannot read property 'name' of undefined.
When I call submitForm method, the value of isFormValid is always false. Even when I have filled the contact.name field. And validation properties like $dirty don't change.
I have no idea why these happen. What am I doing wrong?
Update: (In case it might be useful to solve the problen) My console errors filter was unchecked by accident and I hadn't seen this Nuxt warning: [vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once.. As I searched about this error I found out Nuxt uses a dependency called Nuxt composition api which depends on #vue/composition-api. But when I reomved #vue/composition-api from plugins even the code inside setup didn't work correctly.
Solution with vuelidate:
create plugin (plugins/vuelidate.js):
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
nuxt.config:
plugins: [
{ src: '~/plugins/vuelidate' }
],
import:
import { required } from 'vuelidate/lib/validators'
method:
formSubmit() {
this.$v.$touch();
if (!this.$v.$invalid) {
// if invalid datas
}
},
template:
<h3
:class="{
'is-invalid': $v.contact.name.$error,
}"
>
Something
</h3>
I have started using ckeditor4-vue
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html#using-the-component-locally
<template>
<div>
<ckeditor
v-model="formData"
:config="editorConfig"
#input="$emit('update:editorData', formData)"
></ckeditor>
</div>
</template>
<script>
import CKEditor from 'ckeditor4-vue';
export default {
components: {
ckeditor: CKEditor.component
},
props: ['editorData'],
data() {
return {
formData: this.editorData,
editorConfig: {}
};
},
mounted() {
CKEDITOR.disableAutoInline = true;
}
};
</script>
However I can't find how I can use CKEDITOR, in this example, I have CKEDITOR is not defined.
Thank you
make sure you're calling it the right way, CKEDITOR <> CKEditor.
try removing your mounted and this should works
I'm new to both Vue and Form.io, so there is something simple I'm missing here. I'm getting the error "Module not found: Error: Can't resolve 'vue-formio'" in this Form.vue component:
<template>
<formio src="https://rudtelkhphmijjr.form.io/demographics" v-on:submit="onSubmitMethod" />
</template>
<script>
import { Formio } from 'vue-formio';
export default {
components: {
formio: Formio
},
methods: {
onSubmitMethod: function(submission) {
console.log(submission);
}
}
};
</script>
This was an iteration of original Formio instruction that said "embed a form within your vue application, create a vue component using [this] formio component":
<template>
<formio :src="formUrl" v-on:submit="onSubmitMethod" />
</template>
<script>
import { Formio } from 'vue-formio';
export default {
data: function() {
// Load these from vuex or some other state store system.
return {
formUrl: "https://rudtelkhphmijjr.form.io/demographics"
}
},
components: {
formio: Formio
},
methods: {
onSubmitMethod: function(submission) {
console.log(submission);
}
}
};
</script>
But this too also returned the "Module not found: Error". Here is my App.vue:
<template>
<div id="app">
<Form />
</div>
</template>
<script>
import Form from './components/Form.vue'
export default {
name: 'app',
components: {
Form
}
}
</script>
I set up the basic project using Vue CLI and used npm install --save vue-formio before firing it up. Newbie help greatly appreciated!
I've also just noticed that vue-formio is not registered (as a dependency?) in package.json so perhaps that is related.
In documentation import { Form } from 'vue-formio';
so you should replace your import on 6 line to import { Form: Formio } from 'vue-formio';
I've created a vuejs library with some components that could be used in many project.
In that library, I've got a component which can load svg files to be used inline in html (svg-icon).
It work great.
But in this same library, I've got another component which use svg-icon with a svg image stored in the library.
An import point, I'd like to use this library (node module) with an npm link
Which is the good way to give the path of the svg image, or where to store it?
I've tried a lot of different paths, but none of them is working...
This is my svg-icon component:
<template>
<component :is="component"></component>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
icon: {
type: String,
required: true
}
},
data () {
return {
component: null
}
},
watch: {
icon: () => {
this.load()
}
},
computed: {
loader () {
return () => import(this.icon)
}
},
methods: {
load () {
this.loader().then(() => {
this.component = () => this.loader()
})
}
},
mounted () {
this.load()
}
}
</script>
And this is the component which use svg-icon (the svg image is in the same folder actually) :
<template>
<svg-icon icon="~my-module/components/media/no-image.svg"></svg-icon>
<svg-icon icon="./no-image.svg"></svg-icon>
</template>
<script>
import SvgIcon from '../svg-icon/SvgIcon'
export default {
components: {
SvgIcon
}
}
</script>
I always got this errors:
Cannot find module '~my-module/components/media/no-image.svg'
Cannot find module './no-image.svg'
Which is the good path in that situation? Or should I put the svg file somewhere else? (I'd like to keep it in the library)
I've created a CodeSandbox here
SvgIcon.vue
<template>
<span v-html="icon"></span>
</template>
<script>
export default {
name: "SvgIcon",
props: {
icon: {
type: String,
required: true
}
}
};
</script>
HelloWorld.vue
//Usage
<template>
<svg-icon :icon="AlertIcon"></svg-icon>
</template>
<script>
import AlertIcon from "../assets/alert.svg";
import SvgIcon from "./SvgIcon";
export default {
data() {
return { AlertIcon };
},
components: {
SvgIcon
}
};
</script>
I've made some changes to your components.
You need to import the image and pass it to your component because dynamic import causes complications when it comes to the absolute paths.
I've removed some unnecessary fields from your SvgIcon code.
Hope this helps.