Develop Reference

ais-refinement-list in VueInstantSearch(Algolia) doesn't renders list

I have stucked with an issue using refinement list widget of algolia.
First of all my resulting data structure is like that:
[
{
objectID: 999,
title: 'some title',
categories: [
{
id: 444,
name: 'some name',
},
{...},
]
}
]
I have that type of structure on my page:
<ais-instant-search
:search-client="searchClient"
:initial-ui-state="{
index_Name: { query: searchedValue },
}"
index-name="index_Name"
>
<ais-index index-name="index_Name">
<ais-configure
:filters="facetsFilters"
:facets="['categories.id']"
:hits-per-page.camel="items"
/>
<ais-refinement-list attribute="categories.id" />
<div> ...Some other widgets nested in divs as ais-search-box, ais-sort-by, etc </div>
</ais-index>
</ais-instant-search>
Within ais-configure I have passed to filters a facetsFilters variable which contains string with such content:
"categories.id:1 OR categories.id:5"
and it works ok, I'm getting results within selected categories,
problems starts, when i try to get refinement-list here:
<ais-refinement-list attribute="categories.id" />
I have an empty list despite that on dashboard this attribute is added as an attributesForFacetings and in ais-configure filters parameters with categories.id in it also works well.
Any suggestions is highly appreciated !

Problem was in Dashboard of Algolia.
When we clicked on 'searchable' instead of 'filter only' radiobutton for chosen attributeForFaceting - everything starts working good.

Adding pictures to Carousel from your own computer in Vuetify

I have a Carousel with some pics. I can use URL link to show the pics but when I want to show pics that are stored in my computer instead of the URL it doesn't show the pictures. What's the way to add a picture to your Carousel from your own computer?
Here is the Code:
<template>
<div class="caro">
<v-carousel >
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
>
<div class="text-xs-center">
</div>
</v-carousel-item>
</v-carousel>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
id: 'rack', src: 'https://logisticpackaging.com/CrXBdba4vG7B2k/wPHm6Sft56fw2V/wp-content/uploads/2015/06/pcb-racking-system5.jpg', title:'Rack Section'
},
{
id: 'subrack', src: '../assets/Parts.jpg' , title: 'Subrack Section'
},
{
id: 'parts', src: '../Hasan.jpg' , title: 'Parts Section'
},
{
id: 'admin', src: 'https://d15shllkswkct0.cloudfront.net/wp-content/blogs.dir/1/files/2013/04/Transactional-Database.jpg' , title: 'Database Section'
}
]
}
}
In my example the "rack" and "admin" section do have pictures since they get it from internet. But "parts" and "subrack" don't have pictures since I'm trying to use my own computer's pictures.

Are you running with npm in dev mode or Build? I have a folder called public, i put all my images / svg etc in folders in this public folder, because webpack will build this folder with the vue code.
So as source i use src="img/brand/logo.svg"
Except when you dont use webpack and a vue build template, i wouldnt recommend placing images elsewhere than in the public folder. This folder is easy to copy and most likely will be copied by webpack, so you can upload everything in the dist folder.

the two photos you are trying to render in the carousel are coming from two different sources, there is nothing wrong with the code, double check the photo source and confirm that the photo extension in the code matches the photo extension in the source folder

Although the Vue loader automatically converts relative paths to required functions, this is not the case with custom components. You can fix this problem by using require.
If you change the items array format, the problem will be fixed:
<script>
export default {
data () {
return {
items: [
{
id: 'subrack', src: require('../assets/Parts.jpg') , title: 'Subrack Section'
},
{
id: 'parts', src:require( '../Hasan.jpg'), title: 'Parts Section'
},
]
}
}

Add <pre> tag button in TinyMce 4

I'm tying to add code into a tinymce textarea and I'm planning to hightlight it using highlight.js
In order to to so, I just need to wrap the code between the tags <pre></pre> and highlight.js will do the rest.
I tried using the code plugin in tinymce, which opens a popup where the user can paste the code. But to my surprise it does actually nothing with that text. It only allows you to see the HTML code for it, which will basically just show the text between </p> tags.
I would prefer not to use codesample plugin because I just want to add the pre tag and do not apply any codesample styles to it. I do not want either to have a list of languages to select from or to treat the whole code text as a block that has to be removed in a whole.
Any ideas of how to do this?

If I understand your question you want a dialog where someone can paste in some HTML and you will wrap that in <pre> and </pre> tags as you insert the content into the editor.
There is not a plugin in TinyMCE that does precisely what you want. You are correct that the codesample plugin is more complex than that (it uses something called Prism.js to handle syntax coloring and highlighting).
You can do one of two things:
Look at how plugins like codesample and template create their dialogs (they use windowManager) and then you could make your own plugin that takes the user's input and wraps it in <pre> and </pre> tags as its inserted into the editor.
Add a toolbar button or menu item via the TinyMCE init and have that code open a dialog (via windowManager) and insert the content into the editor.
If you prefer the first option, using one of TinyMCE's existing templates as a starting point will save you a bit of coding time and show you a good example of how to use windowManager.
Here is an overly simply example of how you might use windowManager in the init:
tinymce.init({
...
setup: function (editor) {
editor.addButton('insertusername', {
text: 'Insert User Name',
icon: false,
onclick: function () {
var person = {
firstname: '',
lastname: ''
};
editor.windowManager.open({
title: 'Insert User Name - Custom Dialog',
body: [
{
type: 'textbox',
name: 'firstname',
label: 'First Name:',
value: '',
minWidth: 800,
value: person.firstname,
oninput: function() {
person.firstname = this.value();
}
},
{
type: 'textbox',
name: 'lastname',
label: 'Last Name',
value: '',
minWidth: 800,
value: person.lastname,
oninput: function() {
person.lastname = this.value();
}
}
],
onsubmit: function(e) {
// console.log('onSubmit called');
editor.insertContent('<span class="abc">'+ person.firstname + ' ' + person.lastname + '</span> ');
}
});
}
}
}
...
});

Add another "Formats" select to TinyMce 4 in Wordpress

I'm using TinyMce Style Formats to add custom formats to the ""Formats" dropdown.
The problem is that I have too many styles to add, and I would like to use another "Formats" dropdown, separated from the first one. I know I can nest formats but it's not enough, I want to add two different Dropdown, how can I do it?

Have a look at the style plugin in tinymce3 (in tinymce4 it is part of the tinymce core). You may copy that plugin rename it and configure it to your needs. Then you need to add the plugin to your plugin list and the tinymce button to your button list.

This is best done adding formats to the formatter programmatically and then adding a menu item and trigger the formatter
editor.on( 'Init', function( e ) {
editor.formatter.register(
'page-title',
{ 'selector': 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li',wrapper: false, classes : ['giga', 'primary-font'] }
);
} );
editor.addButton( 'typography', {
text: 'Typography',
icon: false,
type: 'menubutton',
menu: [
{
text: 'Page Title',
menu: [
{
text: '(Giga) 88 Clan pro thin #000000',
onclick: function() {
editor.formatter.toggle( 'page-title' );
}
},
]
},
]
});

Multiple Instanced CKEditor & CKEDITOR.stylesSet.add

I'm using CKeditor V3.x and I have multiple instances on one page. I had to add custom styles for a client so I used the CKEDITOR.stylesSet.add like this (as mentioned in the documentation http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles):
CKEDITOR.stylesSet.add( 'mystyles',
[
{ name : 'Quote onderschrift', element : 'p', attributes : { 'class' : 'quote_sub' } },
{ name : 'Inleiding', element : 'p', attributes : { 'class' : 'inleiding' } }
]);
config.stylesSet = 'mystyles';
This does work when only having one editor on a page. When I have more editors on a single page I get the following error (via Firebug):
uncaught exception: [CKEDITOR.resourceManager.add] The resource name "mystyles" is already registered.
The result is I'm not getting any editors at all. While this error may seems logic I would like to solve it in a good way. For the time being I managed to solve it following this thread Adding custom styles to CKEditor, so I solved the addition of custom styles on the page itself rather that in the config like this:
CKEDITOR.replace('post_description', {
stylesSet :
[
{ name : 'Quote onderschrift', element : 'p', attributes : { 'class' : 'quote_sub' } },
{ name : 'Inleiding', element : 'p', attributes : { 'class' : 'inleiding' } }
]
});:
As said, this works for forces me to use this fix on all pages where I want the custom styles. Is there a better solution on how to fix this? I'd prefer to have the styled added in the main config file.

I was getting the same bug with only a single editor on the page. I fixed it by setting stylesSet in the main config to be the styles definition I wanted.
config.stylesSet = [
{
name: 'Blue Title',
element: 'h3',
attributes: { 'class': 'blue-title' },
styles: { color: 'blue' }
}, {
name: 'Red Text',
element: 'p',
attributes: { 'class': 'red-text' },
styles: { color: 'red' }
}
];
It's not the perfect solution, but it gets the job done.