ckeditor debugging plugin image - ckeditor

I'm trying to add the doksoft_backup plugin to ckeditor. This is my second try at a plugin and like the first I can't seem to get buttons to appear. I have done the following:
downloaded to the "plugins" directory.
Added the required code to my config.js ... the "extraPlugins" attribute.
config.extraPlugins = 'doksoft_backup';
And a toolbar based on the docs.
config.toolbar = 'TrackingNotesToolBar';
config.toolbar_TrackingNotesToolBar =
[
{ name: 'source', items : [ 'Maximize','-','Source'] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'images', itmes: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'backup', items : [ 'doksoft_backup_save','doksoft_backup_load' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] }
];
The line that I'm trying to get moving is the one containing doksoft_backup_load and _save in it. All the other toolbars listed here load just fine, but there's no save/load button for this plugin.
I tried using the autosave plugin as well. It actually did function and began saving content to keys in local storage on my browser, but like this one I never did get buttons to appear.
I am convinced there is something simple here. There are no JS console errors and I can't navigate to the png's that are supposed to be used.
Is there a trick I'm missing to getting buttons to display? Is there a debug mode for ckeditor that might help?

I think there is an error in the doksoft_backup installation instruction, you don't have to put following code in config.js:
config.extraPlugins = 'doksoft_backup';
Actually you can should put it on the Web page:
CKEDITOR.replace( 'editor1', {extraPlugins: 'doksoft_backup'} );
This should make the two button show up.

Related

What is the syntax to add multiple fonts with Gatsby Plugin Google Fonts?

This works for the Lobster Two font:
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Lobster Two`,
`source sans \pro:400, 400i`, // you can also specify font weights and styles
],
display: "swap",
}
I've tried adding Poppins inside of the fonts array and adding a second fonts array but neither have worked. Every video and article so far sees fit to stop at one font as a demonstration.
Thanks for the help.
With gatsby-plugin-google-fonts you need to add each specific type like:
fonts: [
`montserrat`, `montserrat\:700`, `montserrat\:900`, `open sans`
]
This is because the Google Fonts API has been updated to v2.
I'd recommend using gatsby-plugin-google-fonts-v2 instead:
plugins: [
{
resolve: `gatsby-plugin-google-fonts-v2`,
options: {
fonts: [
{
family: 'Lobster Two',
},
{
family: 'Source Sans Pro',
weights: ['400, 400i']
}
]
}
}
];
If the snippet above doesn't work (check the <link> generated in the <header>) try following the suggested approach in this GitHub thread (transpiling before the format):
{
resolve: `gatsby-plugin-google-fonts-v2`,
options: {
fonts: [
{
family: 'Lobster Two',
},
{
family: 'Source Sans Pro:ital,wght#1,400;',
},
]
}
}

How to explicitly set schema field type to [SanityImage]

I want to set an images field in my document to an array of type [SanityImage].
I have tried setting it to type: 'image' but when I query the field I get that the type is [SanityCollectionItemsImages]
The images field is found inside an object (productVariant) which is then included in the main document (collection) where I have an array of productVariants in my items field.
Inside the fields array of my collection document:
...
{
title: "Items",
name: "items",
type: "array",
of: [
{
title: "Item",
type: "productVariant",
},
],
},
...
The productVariant type object:
export default {
title: "Product variant",
name: "productVariant",
type: "object",
fields: [
{
name: "images",
title: "Images",
type: "array",
of: [
{
type: "image",
options: {
hotspot: true,
},
},
],
},
...
My query using GraphQL:
allSanityCollection {
edges {
node {
_id
title
description
items {
_key
title
images {
asset {
_ref
_id
fluid(maxHeight: 600) {
base64
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
}
}
}
}
}
}
}
When I click on the the images field inside the GraphiQL web IDE:
Using Sanity.io HTTP API to get the whole document:
"images": [
{
"_key": "5605f5383975",
"_type": "image",
"asset": {
"_ref": "image-14f9b7688912499f187b7c20e57816b3cdf42c1e-4016x4688-jpg",
"_type": "reference"
}
},
...
My question is how to set the type of a field in my schema to be explicitly [SanityImage] instead of [SanityCollectionItemsImages] and why do I get that weird type?
The Sanity schema looks totally sane, and the API delivers the proper data structure as you say, so the problem seems to be related to the Gatsby and GraphQL layer of things.
I'll recommend making sure you are using the latest versions of the CLI, Studio and Sanity Gatsby plugin and see if that makes things better as development on the Gatsby source plugin is moving fast.

Retrieve items limited by a field's value inside of a list of objects

I apologise if the title is confusing, but I had a hard time coming up with a good title. :(
I have indexed several news articles that looks like this (shortened):
{
title: "This is definitely a sports article",
categories: [
{
name: "General",
isMain: false,
},
{
name: "Sports",
isMain: true,
}
]
},
{
title: "Slightly sportsrelated, but mostly politics",
categories: [
{
name: "Politics",
isMain: true,
},
{
name: "Sports",
isMain: false,
}
]
}
My problem is that I have to retrieve a list of articles belonging to the "Sports" category, but limited to articles where the "Sports" category's field "isMain" is set to true.
Is that even possible?
(Using Elasticsearch 5.6.6, and I'm unable to reindex and add a "mainCategory" field, unfortunately.)

Kendo UI Diagram ShapeDefaults Content Template

Can we use a kendo Template in the shapeDefaults Content template part in below code?
$("#diagram").kendoDiagram({
dataSource: [{
"name" : "Telerik",
"items": [
{"name": "Kendo", "items": [{"name": "Kendo", "items":[{"name":"abc"}]}]}
],
}],
shapeDefaults: {
content:{template: "#=item.name#"}, //Need to use a kendo template here
editable: true
}
});
Your code is correct but there is a bug in the Kendo code; the content visual is not added on redraw when using templates.
You can wait for next release or simply add it in the redrawVisual method, it should be;
redrawVisual: function() {
this.visual.clear();
this.shapeVisual = Shape.createShapeVisual(this.options);
this.visual.append(this.shapeVisual);
this.visual.append(this._contentVisual);
this.updateBounds();
}

Any way to allow user to change line height in Kendo UI Web editor

Is there any way to add a button to the toolbar in Kendo UI web editor that allows user to change line height of the selected content?
Yes. What you are referring to is accomplished by configuring the stylesheets property of the editor, and then configuring the tools that will apply the styles to the selected content.
$("#editor").kendoEditor({
tools: [
{ name: "formatting", items: [
{ text: "Highlight Error", value: ".hlError" },
{ text: "Highlight OK", value: ".hlOK" },
{ text: "Inline Code", value: ".inlineCode" }
] }
],
stylesheets: [
"../../content/web/editor/editorStyles.css"
]
});
Please refer to this demo on Kendo UI's site: http://demos.kendoui.com/web/editor/styles.html.

Resources