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.
Related
Hello I have HTML data in my React App and want to export this in word document and download at button click event. can any one help to make this one please.
let element = (
<p style={{fontSize: "10px", color:"#000"}}>
Your investment in the maintenance package is just , billed directly to your credit card.
</p>
)
const generateDocx = async () => {
const doc = new Document({
sections: [
{
properties: {},
children: [
new Paragraph({
children: [
new TextRun(element),
],
}),
],
},
],
});
const blob = await Packer.toBlob(doc);
return blob;
};
how to save as .docx file instead of return blob
You can try using the Open XML SDK if you need to build Word documents on the fly. You may search for any libraries in JavaScript that allows creating Word documents like you could do using that SDK, see https://openxmldeveloper.org/. For example, you may find the Creating OpenXML documents using JavaScript post helpful.
In Gatsby I would like to iterate over an array, which contains objects. One of the properties of each object would be an image. I would like to be able to use Gatsby Image.
Here is one example of when I'd like to do so: a page on a website with a gallery of images, each image opens a particular associated video when clicked. Perhaps I'd like 20, 50, or even 100+ objects in the array:
const videos = [
{
id: 1,
name: 'Festival 2018',
url: 'https://www.youtube.com',
img: // HOW TO ACHIEVE?
},
// Many more objects
]
videos.map((item) => {
return (
<Img
key={item.id}
fluid= // HOW TO ACHIEVE?
alt={item.name}
onClick={() => openPlayer(item.url)}
/>
)
})
I understand how to query for single images with GraphQL; or how to query multiple images and use aliases; or how to query all images from a folder. But I have't worked out how to achieve my goal. There's probably a better way. Thanks in advance.
To use internal images in gatsby-image you need to allow Gatsby and their transformers and sharps to know where the images are located using the gatsby-source-filesystem. This will create queryable nodes from your images and will allow you to use gatsby-image with them.
Applied to your case, you need to put all images in the same folder, let's say /src/images and:
const path = require(`path`)
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `src`, `images`),
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}
There, your JSON object will look like:
const videos = [
{
id: 1,
name: 'Festival 2018',
url: 'https://www.youtube.com',
img: '/relative/path/to/your/image.extension',
extension: 'png'
},
// Many more objects
]
Note: thanks John for the clarification about the extension field. Source: https://stackoverflow.com/a/56012718/13714522
In your case, since you are using a JSON-based source, you will need to add the gatsby-transformer-plugin. The configuration will look like:
module.exports = {
plugins: [
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `./src/data/`,
},
},
],
}
Note: assuming that the JSON is placed in /src/data
Also assuming that your JSON file is named data.json, if everything is properly set, Gatsby will create a GraphQL node called allDataJson. Then you only last to create a query (page query or static query) with the following content:
{
allDataJson {
edges {
node {
name
url
id
img {
childImageSharp {
fluid(maxWidth: 1000, quality: 100) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
Note: check your exact query in the localhost:8000/___graphql playground
If your paths are correct, Gatsby will create the childImageSharp node which will allow you to use your own internal images within gatsby-image feature. Since your queried data is stored inside props.data, your final loop should look like:
props.data.allDataJson.edges.node.map((item) => {
return (
<Img
key={item.id}
fluid={item.img.childImageSharp.fluid}
alt={item.name}
onClick={() => openPlayer(item.url)}
/>
)
})
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)
})
}
Looking through the Monaco examples and typings, it looks like themes can be configured via the defineTheme API. I'm trying to apply a VSCode theme to a Monaco instance, and am struggling with how to set the background color (for the whole editor, not just for a token).
Rules are defined as an array of objects with this shape:
IThemeRule {
token: string;
foreground?: string;
background?: string;
fontStyle?: string;
}
What should token be for setting the editor background?
More generally, is there a good way to apply this theme to a Monaco instance, without ripping out theme parsing logic from VSCode source? After a quick attempt to rip out the logic, it seems like a simple custom parser (ie. parse JSON theme definition -> flat list of IThemeRules) is the better way to go.
You can define your own theme and change the editor.background in colors option
monaco.editor.defineTheme('my-dark', {
...,
colors: {
"editor.background": '#394555'
}
});
You can define your theme like this
const theme = {
base: 'vs',
inherit: true,
rules: [
{ token: 'custom-info', foreground: 'a3a7a9', background: 'ffffff' },
{ token: 'custom-error', foreground: 'ee4444' },
{ token: 'custom-notice', foreground: '1055af' },
{ token: 'custom-date', foreground: '20aa20' },
]
}
and then apply it like this
monaco.editor.defineTheme('myTheme', theme)
var editor = monaco.editor.create(document.getElementById('container'), {
value: getCode(),
language: 'myCustomLanguage',
theme: 'myTheme'
});
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. */ } );