We Keep Coding

kendo angular menu without typescript

How I can use the kendo menu without typescript?
html
<kendo-menu [items]="menuItems" [vertical]="true" style="display:inline-block;" (select)="onMenuSelected($event)"></kendo-menu>
TS
menuItems: any[] = [
// {
// text: "Rename",
// },
{
text: "Delete",
},
{
text: "Copy",
},
];
I want to use only html to use of menu

Technically, you can enter the data in the template itself, like this:
<kendo-menu [items]="
[{
text: 'Rename'
},
{
text: 'Delete'
},
{
text: 'Copy'
}]">
</kendo-menu>
Now, while it is possible, it's not good practice. Even if the menu, in this case, is static and simple, it's better to have a const on the component containing the menu entries, or perhaps in a dedicated file if you have many such constants which you in several places.

How to add multiple pages in grapesjs?

I want to include multiple pages in grapesjs framework.

Grapesjs now supports pages using PageManager. you can have a look at the API documentation here https://grapesjs.com/docs/api/pages.html
The way to do it is
const editor = grapesjs.init({
....
pageManager: {
pages: [
{
id: 'page-id',
styles: `.my-class { color: red }`, // or a JSON of styles
component: '<div class="my-class">My element</div>', // or a JSON of components
}
]
},
})
You can add,remove , select the pages by using the methods from grapesjs.Page.

How do I use outsourced and editable scripts in Nuxt.js?

I am currently developing a website with Nuxt. A certain javascript file should be editable after building to change the content of a table. Does anyone have an idea how I can do this?
Up to now I tried to include the javascript file as plugin without success. Furthermore, I also failed the attempt to swap the script as follows:
<!-- my-component.vue -->
<template>
<div>This is a Text!</div>
</template>
<script src="./my-outsourced-script.js"></script>
Currently my Code looks like this:
Bootstrap-Vue table:
<b-table
borderless
striped
hover
responsive
:sticky-header="stickyHeader"
:items="folderPermissions"
:fields="folderGroups"
>
</b-table>
Content to be swapped out:
export default {
data() {
return {
stickyHeader: true,
keyword: '',
sortBy: 'xxx',
sortDesc: false,
folderGroups: [
{
key: 'drive',
stickyColumn: true,
label: ' ',
isRowHeader: true
},
...
],
folderPermissions: [
{
drive: 'Some Text',
id: 0,
a: 1
},
...
]
}
}
}
My wish would be to have folderGroups and folderPermissions in the code shown above in an outsourced javascript file to easily modify them and see the changes on the website.

Like you do, or if you try to import your js file with your data like import { folderGroups, folderPermissions} from './my-outsourced-script.js, you cannot change the file without rebuild your nuxt app.
Try to build with your file as below:
{
"folderGroups": [
your datas
],
"folderPermissions": [
your datas
]
}
And dynamic import in your component:
data() {
folderGroups: [],
folderPermissions: []
},
mounted() {
this.$http.get('/js/my-outsourced-script.json').then((response) => { // no need `assets`
console.log(response.body)
this.folderGroups = response.body.folderGroups
this.folderPermissions = response.body.folderPermissions
}, function (error) {
console.log(error.statusText)
})
}

Config controlsOptions not working

In HTML5 version can't customize transform ratios and fonts for text tool.
var editor = new PhotoEditorSDK.UI.DesktopUI({
controlsOptions: {
transform: {
availableRatios: [
'imgly_transform_common_custom',
'imgly_transform_common_square',
'imgly_transform_common_4-3',
'imgly_transform_common_16-9'
]
},
text: {
replaceFonts: true,
fonts: [
{
fontFamily: 'Alegreya', // The font family name, defined by Google Fonts
variations: [
{
identifier: 'alegreya',
provider: 'google' // This loads the font from Google Fonts
}
]
}
]
}
}});
But nothing changed. Please help.

Found an error, controlsOptions must be inside editor object.

How to set ckeditor config when using the jquery version?

I'm using the jquery version of ckeditor, like this:
$(".textarea").ckeditor();
I need to specify the toolbar buttons, but I don't know how. All the help I found here on stackoverflow or using google was for the old javascript ckeditor version, OR I don't know how to use it with jquery (code above).
Also, how do I specify the css file location, so that the ckeditor loads my css and displays the data the same way it will be displayed on the site?
Anyone can help with this mess?

$(".textarea").ckeditor(function() {
// Instance loaded callback.
}, {
// Config here.
});

Not sure if this is a new feature of CKEDITOR, but just want to share my solution (in case it helps anyone looking for this now):
$("textarea.youreditor").ckeditor
(
{
customConfig: "/path/to/custom/config.js"
}
);
... and my config looks like this (simply copied the default config.js:
CKEDITOR.editorConfig = function(config)
{
config.toolbar_Full =
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }
];
};
** I am cross posting my solution from here: How do I pass in config info to CKEditor using the jQuery adapter?

This is how I set the config using jQuery....
var config = {
toolbar: [ /* Whatever toolbars you wish go here. */ ],
height: 250,
width: 500,
align: "left",
contentsCss: ["body { /* Style your body any way you like */ } otherCSSStuff { /* Style away. */} "]
/*and whatever other options you wish to config... */
};
$( 'textarea.editor' ).ckeditor( config, function() { /* Your callback function. */ } );