I'm using my own plugin providing widgets for the CKEditor. I'm not able to edit images in editables.
It's no problem to add an image. The editor shows it.
But if I want to edit one, the dialog fields (like URL) are empty. I'm using the default image plugin (no image2 widget).
Is there something I have to do for supporting this feature?
I added an example of my plugin. I'm using it in a drupal web portal in combination with the drupal ckeditor module.
// Register our custom "section" widget plugin with CKEditor.
CKEDITOR.plugins.add('section', {
requires : 'widget',
init : function(editor) {
// Register the widget.
editor.widgets.add('example', {
template : '<section class="example"><div class="container-fluid"><div class="row"><div class="col-sm-12 col-md-6 editable-left"></div><div class="col-sm-6 col-md-3 text-center editable-middle"></div><div class="col-sm-6 col-md-3 editable-right"></div></div></div></section>',
allowedContent : 'section(!example)',
editables : {
left : {
selector : '.editable-left',
},
middle : {
selector : '.editable-middle',
},
right : {
selector : '.editable-right',
},
},
upcast : function(element) {
if (element.name == 'section' && element.hasClass('example')) {
return true;
} else {
return false;
}
}
});
}
});
Related
I have a computed property that is not working correctly. When reading the docs this is how it should be done for Vue 2.x. The code i have:
<template>
<div>
<button :disabled="isDisabled">Import configurator data</button>
<input class="input" type="file" id="file" v-on:change="setFile">
</div>
</template>
<script lang="js">
export default {
data: () => {
return {
importDisabled: true,
}
},
computed: {
isDisabled() {
return this.importDisabled;
},
},
methods: {
setFile: (e) => {
this.importDisabled = false;
},
}
}
</script>
Expected behaviour: Button enables when a file is selected.
Actual behaviour: Button stays disabled.
What am i missing here? A console.log within the isDisabled() methods shows it is only called once. It is not called after importDisabled changes.
Other info:
vue 2.6.12
laravel nova
Also note: Vue tools does not detect a Vue component in the inspector. But the Vue behaviour is working when loading the tool.
It seems arrow functions are bound to the parent context. That was the reason my code did not work. this is then not bound to the Vue instance but the parent (Window) which causes it not to work.
Wrong:
setFile: (e) => {
this.importDisabled = false;
},
Right:
setFile: function() {
this.importDisabled = false;
},
More information:
https://codingexplained.com/coding/front-end/vue-js/using-es6-arrow-functions-vue-js
I tried to upload an image from my asset but nothing appears. I would like the image source to match the value set in character.headImage.
data/character.js
export const character = [
{
name : 'Super Lady',
fullImage : '../assets/characters/superLadyFull.png',
headImage : '../assets/characters/superLadyHead.png',
description : '少し恥ずかしがり屋の女の子 好きなことは買い物、カフェ巡り'
}
]
charactersSelection.vue
<template>
<div>
select the characther
<div v-for="character in characters">
<img :src="character.headImage">
<p>{{character.description}}</p>
</div>
</div>
</template>
<script>
import {character} from "../data/Character";
export default {
name: "CharactersSelection",
data() {
return {
characters : character
}
}
}
</script>
<style scoped>
</style>
Ultimately you want your image to look like this
<img src="assets/characters/superLadyHead.png">
Change your character image source strings to reflect the following
export const character = [
{
name : 'Super Lady',
fullImage : 'assets/characters/superLadyFull.png',
headImage : 'assets/characters/superLadyHead.png',
description : '少し恥ずかしがり屋の女の子 好きなことは買い物、カフェ巡り'
}
]
However, this makes some assumptions about how your page is being served.
I'm trying to make my VueJS template refresh after an AJAX request.
At the page first loading my datas are correctly updated en the template is OK.
in my template i have this section that i want to be updated each time one of the task has changed :
<li v-for="(task,index) in tasks" #click="setCurrentTask(index)" :class="{'active' : currentTask.id == task.id}">
<span><i class="far fa-dot-circle"></i></span>{{ task.attributes.name }}
<a class="ui mini label" :class="task.attributes.state.attributes.name">{{ task.attributes.state.attributes.name }}</a><br>
<div class="details">
{{ currentTask.attributes.estimatedStart }}<br>
<i class="fas fa-play" #click="startTask(index)"></i>
</div>
</li>
Then i have a request that says to change the state of a specific task to start it then it returns the task with the status updated :
export default {
name: "fdr",
data(){
return {
fdr:'',
tasks:'',
currentTask:null,
currentIndex:null,
}
},
methods: {
setCurrentTask: function (index) {
this.currentTask = this.tasks[index]
this.currentIndex = index;
if(this.currentTask.time != null){
$('.time').html( this.currentTask.timer.getTimeValues().toString());
$('#startDate').calendar();
}
},
startTask(index){
axios.get(this.$env_uri+'/api/task/'+this.tasks[index].id+"/start").then(function (resource) {
this.tasks[index] = resource.body
}.bind(this))
},
},
created() {
this.$http.get(this.$env_uri+'/api/fdr/' + this.$route.params.id)
.catch(response => {
return this.$router.push('/404')
})
.then(function (resource) {
this.fdr = resource.body
this.tasks = this.fdr.relationship.tasks
this.setCurrentTask(0);
}
);
},
When this.task is updated VueJs is not refreshing my template to display the new status of the task. I can't find a way to do it... do you have any ideas ?
Totally misunderstod the issue first.
The problem is updating updating an index in an array. This is something that has to be done with Array.$set(index, value) since Vue don't have a way to tell if an index in an array is changed.
You can read more about it here
I'm trying to implement modal windows with Vuejs.
The code below shows that after the user uploads the favorite photo,
then modal window appears, and photos which were uploaded so far and the newly registered photos are displayed
it will confirm when the user press the "confirm" button.
However, at present, data is not set in the modal window after fetching data with ajax after uploading.
How do I set the data in the modal window part?
<template>
<div>
<!-- upload -->
<div class="button__action">
<button type="button" #click="uploadData(originalData.image)">upload</button>
</div>
<!-- Modal window -->
<modal name="modal-view">
<div>
<div class="modal__box" v-if="modalList.list">
<img :src="modalList.list.url">
<p class="image__name">{{modalList.list.name}}</p>
</div>
<button type="button" #click="submit">Confirm</button>
</div>
</modal>
</div>
</template>
<script>
import { post } from './handler/api'
import { toFormat } from './handler/form'
export default {
props: {
originalData: {
type: Object,
required: true,
}
},
data: function(){
return {
modalList : {
list : [],
},
}
},
methods: {
showModal () {
this.$modal.show('modal-view');
},
uploadData() {
const form = toFormat({image: this.originalData.image})
post(`/api/upload/`, form)
.then((res) => {
if(res.data) {
Vue.set(this.$data, 'modalList', res.data.list);
this.$modal.show('modal-view');
}
})
.catch((err) => {
//error
})
},
submit() {
}
}
}
</script>
Try this:
uploadData() {
var vm = this;
post(`/api/upload/`, toFormat({image: this.originalData.image})).then(res => {
if(res.data) {
vm.modalList = res.data.list;
this.$modal.show('modal-view');
}
})
}
I am trying to implement vue-multiselect (version 1.1.3) with Laravel 5.
In my vue file I have this code:
<template>
<div class="dropdown">
<multiselect
:seleted="multiValue"
:show-labels="false"
:options="options"
:placeholder="placeholder"
:searchable="true"
:allow-empty="false"
:multiple="true"
key="name"
label="name"
#update="updateSelected"
></multiselect>
<label v-show="showLabel" for="multiselect"><span></span>Language</label>
</div>
</template>
<script>
import { Multiselect } from 'vue-multiselect';
export default {
components: { Multiselect },
props: {
selected: null,
options: {
type: Array, default: function () {
return []
}
},
placeholder: 'Select...'
},
methods: {
updateSelected (newSelected) {
this.selected = newSelected
}
}
}
</script>
In my blade file:
<div class="form-group">
<drop-down
:options="{{ $members_list->toJson() }}"
></drop-down>
</div>
In my controller:
$members = DB::table('members')
->orderBy('member_first_name', 'asc')
->get();
$members_list = $members->map(
function($member) {
return [
"value" => $member->member_id,
"label" => $member->member_first_name. " ". $member->member_last_name
];
}
);
When I run the page I get a select list with all the members in it, but when I try to select one, it turns Red, it is added to the selected list on top but I cannot select more options and in firebug I get this error:
[Vue warn]: You are setting a non-existent path "selected" on a vm instance. Consider pre-initializing the property with the "data" option for more reliable reactivity and better performance.
What am I missing?
Typo might be causing issues?
:seleted="multiValue"
Should be :selected="multiValue"
BTW :selected is deprecated in the version 2.0. :value has taken it's place.
I think it is because there is no variable called 'multiValue' in your component.
In :seleted="multiValue" , using the variable "options" instead of "multiValue"