Page builder
Development
npm install
npm run start
Open:
http://localhost:8085/
Add new component
- Create new forlder in
src/components. - Add index.js
export default function NewComponent(editor) {
}-
Add style file for component (optional). Naming by template
NewComponent.style.scss. -
Add new component to file
src/components/index.js
...
require('./NewComponent').default(editor);
}Usage Serpstat admin panel
For example see file backend/views/pagebuilder_script/pagebuilder_script.php in prodvigator repo.
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<link href="https://unpkg.com/@serpstat/pagebuilder@2.1.39/dist/css/pagebuilderStyles.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs@0.19.5/dist/grapes.min.js"></script>
<script src="https://unpkg.com/@serpstat/pagebuilder@2.1.39/dist/dist/pagebuilder.min.js"></script>
<script>
{
const openPageBuilderBtn = document.querySelectorAll('.open-in-page-builder');
function setReadyHtmlCss({ destinationResultHtmlId, html, css }) {
const el = document.getElementById(destinationResultHtmlId);
el.value = [
`<style>${css}</style>`,
html.replace('<body>', '').replace('</body>', ''),
].join('');
}
const builderVisibility = {
hide(pagebilderContainerId) {
const editorWrapp = document.getElementById(pagebilderContainerId);
editorWrapp.style.display = 'none';
document.querySelector('html').style.fontSize = '10px';
},
show(pagebilderContainerId) {
const editorWrapp = document.getElementById(pagebilderContainerId);
editorWrapp.style.display = 'block';
editorWrapp.style.width = '100%';
editorWrapp.style.position = 'fixed';
editorWrapp.style.zIndex = '10000';
editorWrapp.style.left = 0;
editorWrapp.style.top = 0;
document.querySelector('html').style.fontSize = '16px';
}
};
try {
for (const btn of openPageBuilderBtn) {
let gEditor = null;
function runEditorOnClick({
storageDocId,
destinationResultHtmlId,
pagebilderContainerId,
storageTextareaSelector,
}) {
return runEditor({
container: `#${pagebilderContainerId}`,
storageDocId: `${window.location.hostname}_${storageDocId}`,
dependenciesStyles: [
'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&subset=latin,cyrillic&display=swap',
'https://serpstat.com/css/base_global.css',
'https://serpstat.com/css/dialog.css?518901310',
'https://unpkg.com/@serpstat/pagebuilder@2.1.39/dist/css/pagebuilder.css'
],
saveAndCloseCallback() {
const html = gEditor.getHtml({ cleanId: true });
const css = gEditor.getCss();
setReadyHtmlCss({
destinationResultHtmlId, html, css
});
builderVisibility.hide(pagebilderContainerId);
},
assetManagerConfig: {
upload: '/site/upload_image',
uploadName: 'uploadfile',
multiUpload: false,
customFetch(url, fetchOpts) {
return fetch(url, fetchOpts).then(res =>
((res.status / 200) | 0) == 1 ?
res.json().then(res => {
return {
data: [res.filelink],
}
}) :
res.text().then(text => Promise.reject(text)
)
);
}
},
storageManager: {
type: 'textarea-storage',
options: {
['textarea-storage']: {
selector: storageTextareaSelector,
}
}
}
});
}
btn.addEventListener('click', function () {
const {
storageDocId,
destinationResultHtmlId,
pagebilderContainerId,
storageTextareaSelector,
} = this.dataset;
if (!gEditor) {
if (typeof runEditor === 'undefined') {
const initContent = btn.innerText;
btn.setAttribute('disable', true);
btn.innerText = 'Loading builder...';
const internal = setInterval(() => {
if (
typeof runEditor === 'undefined' ||
typeof grapesjs === 'undefined'
) {
return;
};
btn.setAttribute('disable', false);
btn.innerText = initContent;
gEditor = runEditorOnClick({
storageDocId,
destinationResultHtmlId,
pagebilderContainerId,
storageTextareaSelector,
});
builderVisibility.show(pagebilderContainerId);
clearInterval(internal);
}, 1000);
} else {
gEditor = runEditorOnClick({
storageDocId,
destinationResultHtmlId,
pagebilderContainerId,
storageTextareaSelector,
});
builderVisibility.show(pagebilderContainerId);
}
return;
};
builderVisibility.show(pagebilderContainerId);
});
}
} catch (e) {
console.error(e);
}
}
</script>