I have read the docs and dozens f stackoverflow topics about implementing CKeditor with the upload adapter CKfinder. But none are in vue. Only about CKeditor but nothing about the CKfinder. The docs are so unclear to me and I have read some other topics complaining about it too. So I hope someone here can help me to understand how this works.
So this is what I have right now:
<template>
<section class="j-input-text-editor row">
<label v-if="label" :class="label_class">
{{label}}
</label>
<div :class="input_class">
<ckeditor ref="editor" :editor="editor" v-model="mValue" #input="updateValue"></ckeditor>
</div>
</section>
</template>
<script>
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
export default {
name: "textEditor",
data() {
return {
mValue: '',
editorData: '<p>Content of the editor.</p>',
editor: ClassicEditor,
}
},
created() {
ClassicEditor
.create( this.$refs.editor, {
ckfinder: {
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json' // here you can set your own file path
}
} )
.then(console.log('yeay'))
.catch(console.log('error'));
},
}
</script>
So i tried uploading an image in the editor and i get this:
Like I said. I'm totally stuck at this point and bin trying sins friday (weekend I had not to work obviously)
P.S. am also using laravel, do I need something in the back-end?
P.S.S. My english is not the best, I know. If I need to explain more clear what my problem is then I will try my best to do that for you.
You could install CKeditor. You can download it from: https://ckeditor.com/ckfinder/download/
They have a Laravel package as well: https://github.com/ckfinder/ckfinder-laravel-package
Related
Good afternoon, I'm studying Vue and trying to make a multilingual application, I found this package and installed it - https://github.com/xiCO2k/laravel-vue-i18n
I managed to connect it, and the translation works.
But I can't figure out how to do the language change? The documentation says it:
import { loadLanguageAsync } from 'laravel-vue-i18n';
<template>
<div>{{ $t('Welcome!') }}</div>
<button #click="loadLanguageAsync('pt')">Change to Portuguese Language</button>
</template>
, but I don't understand how use it,
What code to use in the method? I will be very grateful to you if you show an example of a method for changing the language.
My app.blade.php
<html lang="{{str_replace('_', '-', app()->getLocale())}}">
My langs: en.json | en.json
My vue.js
#click="switchLanguageTo('en')"
import {i18nVue, loadLanguageAsync} from 'laravel-vue-i18n';
methods: {
switchLanguageTo(lang) {
// here i dont understand
loadLanguageAsync(lang);
// here i dont understand
},
},
it's quite simple.
By calling loadLanguageAsync function you can change your language immediately.
<script setup>
import { loadLanguageAsync } from 'laravel-vue-i18n';
</script>
<template>
<h1> {{ $t('Hello World')}} </h1>
<button class="hover:underline" #click="loadLanguageAsync('fr')"> Change language </button>
</template>
/lang/fr.json
{
"Hello World": "Bonjour le monde"
}
I know I can register global components in the file located in resources/js/app.js.
I know when I do this I can use these component in any place (because they are global).
But I don't want that. I have a big application and different functionalities solved in different routes. So I don't want the whole components available in all my views.
How can I register locally the components I want to be available only in one view?
Thanks
Vue js register component in local:
step-1 ) storing the component object in a variable:
var demo = {
data: function() {
return {
message: 'This is a local components.'
};
},
template: `
<div>
<h1>Component: {{ message }}</h1>
</div>
`
};
Step-2 ) Add a component property with the components that we want to register locally.
new Vue({
el: '#app1',
components: { /*Here we have added property*/
'demo': demo
}
});
Step-3 ) Template
<div id="app1">
<demo></demo>
</div>
*Notice: This property should be an object and contain key-value pairs of tag names and configuration objects.
You can do it by importing the component in your parent vue component
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from '#/folder/ChildComponent'
export default {
components: {
ChildComponent
},
}
</script>
Here is the approach that I follow.
Create a new file in your components folder in resources/js/components/YourComponent.vue
<template>
<div>
<h2>My awesome component</h2>
</div>
</template>
<script>
export default {
}
</script>
And in the view where you want the component, you can import it like below
<template>
<div>
<h2>Import another component</h2>
<awesome-component></awesome-component>
</div>
</template>
<script>
import awesomeComponent from "./components/YourComponent.vue";
export default {
components: {
'awesome-component': awesomeComponent
}
}
</script>
I want to import this library into my laravel project. I have run npm install vue-simple-lightbox and then in my blade template i have this code
#extends('layouts.app')
#section('content')
{{-- some html code --}}
<div class="row">
</div>
<div class="row">
<lightbox id="mylightbox" :images="images" :image_class="'img-responsive img-rounded'" :album_class=" 'my-album-class' " :options="options"></lightbox>
{{-- more html code --}}
</div>
#endsection
<style type="text/css">
.dropdown, .dropdown-menu {
width: 100%;
}
</style>
#section('scripts')
// import the library here?
<script type="text/javascript">
let app = new Vue({
el: '#app',
data() {
return {
images : [
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
title : 'Image 2'
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img2.jpg',
title : 'Image 3'
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img3.jpg',
title : ''
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img4.jpg',
title : ''
},
],
options : {
closeText : 'X'
}
};
},
mounted() {
},
});
</script>
#endsection
Where should i import the library? I tried to import it into app.js file using this code window.Lightbox = require('vue-simple-lightbox');, but then how do i use it? It seems the blade template have no idea what is 'lightbox'.
I am getting this error
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What is the correct way of importing the library and then use it inside the blade template? Thanks!
Extract your js code to a single file, blade templates are not compiled and it wont work if you import it there.
So copy everything over to say, app.js, then include it via a script tag
Inside app.js you can import lightbox from 'vue-simple-lightbox'
Now, make sure you add it to your webpack.mix file through
.js('path/to/app.js', 'public/js/app.js')
That way the library will get compiled into the asset.
Now, regarding the VUE tempalte not finding the lightbox component.
You forgot to add the component part of the Vue instance:
import Lightbox from 'vue-simple-lightbox'
export default {
components: {
Lightbox //HERE
},
...
You can import the file directly from GitHub:
<script src="https://github.com/vrajroham/vue-simple-lightbox/blob/master/dist/vue-simple-lightbox.js"></script>
I'm taking over a project that has a lot of AJAX loaded HTML snippets. I want to progressively introduce Vue.js where I can. I'm not trying to async load any component definitions or javascript, but I would like to load an HTML snippet that has a v-on:click binding like this:
<button class="btn btn-primary" v-on:click="showModal=true">
Show Modal Dialog
</button>
Is there anyway for vuejs to parse html snippets that come down from jQuery and read the v-* attributes?
You can use <v-runtime-template> to load Vue template strings at runtime:
<template>
<div id="app">
<template v-if="template">
<v-runtime-template :template="template"></v-runtime-template>
</template>
<div v-else>Loading...</div>
</div>
</template>
<script>
export default {
data() {
return {
template: ''
}
},
mounted() {
this.template = this.getVueTemplateFromServer();
},
methods: {
getVueTemplateFromServer() { /*...*/ }
}
}
</script>
demo
I am newbie to react js.
After couple of hours finally I have some login box code rendering.
But the issue is I am unable to bind click event on button.
What i am using.
Laravel 5.6
react js (16.3.1)
What i have tried until now is
https://www.tutorialspoint.com/reactjs/reactjs_events.htm
https://reactjs.org/docs/handling-events.html
This is my final code
import React, {Component} from 'react';
import {Page, Card, Button,List,TextField} from '#shopify/polaris';
export default class Login extends React.Component {
constructor() {
super();
this.loginBtbClicked = this.loginBtbClicked.bind(this);
}
loginBtbClicked() {
debugger;
console.log('Hello');
}
render() {
debugger;
/* Some css code has been removed for brevity */
var divStyle = {
width: '500px'
};
return (
<div className="mt-5 mx-auto" style={ divStyle }>
<Card title="Login" subdued sectioned>
<div>
<TextField label="Store Url" type="text" helpText='ex. store.myshopify.com'></TextField>
</div>
<div className="mt-5">
<Button size="large" fullWidth primary onClick = {this.loginBtbClicked} >Login</Button>
</div>
</Card>
</div>
);
}
}
Also help me with best practice in react js for form submit and click event.
Here is the link for github project
https://github.com/little-isaac/shopify-polaris-laravel-test.git
I have changed webpack.mix.js file's path
From
mix.react('resources/assets/js/app.js', 'public/app.js')
to
mix.react('resources/assets/js/app.js', 'js/app.js')
And forget to change public path
mix.setPublicPath('');