Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/landofcoder/strapi-pagebuilder
Strapi CMS pagebuilder plugin
https://github.com/landofcoder/strapi-pagebuilder
content-builder pagebuilder strapi-cms
Last synced: 11 days ago
JSON representation
Strapi CMS pagebuilder plugin
- Host: GitHub
- URL: https://github.com/landofcoder/strapi-pagebuilder
- Owner: landofcoder
- License: mit
- Created: 2021-04-14T08:22:32.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-12-30T03:45:15.000Z (about 3 years ago)
- Last Synced: 2024-11-05T14:11:58.335Z (about 2 months ago)
- Topics: content-builder, pagebuilder, strapi-cms
- Language: SCSS
- Homepage: https://landofcoder.com
- Size: 387 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# strapi-plugin-page-builder
Add GrapesJS builder to your own strapi application
This is simple pagebuilder for Strapi
# Setup
Install package
```sh
npm i --save page-builder
# or
yarn add page-builder
```
Create or edit `your-project/admin/admin.config.js` and add sass loader (which is required by GrapesJS)
```javascript
module.exports = {
webpack: (config, webpack) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
// Allow scss modules
config.resolve = { ...config.resolve, extensions: [...config.resolve.extensions, '.scss'] };
// Configure a SASS loader
config.module.rules.push({
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
],
});
return config;
},
};
```
Edit your model(e.g. the model that'll handle web builder field) controllers (`your-project/api/your-model/controllers/your-model.js`).
> At the time of this release, strapi does not allow to add custom private fields to model so all the data required to init editor will be stored in your model. The following step prevent useless data to be returned on get requests:
```javascript
'use strict';
const { sanitizeEntity } = require('strapi-utils');
const cleanupEntity = (entity) => {
const { content } = entity;
return { ...entity, content: { html: content.html, css: content.css } };
};
module.exports = {
async find(ctx) {
let entities;
if (ctx.query._q) {
entities = await strapi.services.yourModel.search(ctx.query); /* eslint-disable-line no-undef */
} else {
entities = await strapi.services.yourModel.find(ctx.query); /* eslint-disable-line no-undef */
}
return entities.map((entity) => {
return sanitizeEntity(cleanupEntity(entity), { model: strapi.models.yourModel } /* eslint-disable-line no-undef */);
});
},
async findOne(ctx) {
const { id } = ctx.params;
const entity = await strapi.services.yourModel.findOne({ id }); /* eslint-disable-line no-undef */
return sanitizeEntity(cleanupEntity(entity), { model: strapi.models.yourModel } /* eslint-disable-line no-undef */);
},
};
```
> NB: this code assumes that you named a field `content` with type `json` in model `yourModel`