https://github.com/dashpilot/editscreen2
On-page CMS
https://github.com/dashpilot/editscreen2
Last synced: 10 days ago
JSON representation
On-page CMS
- Host: GitHub
- URL: https://github.com/dashpilot/editscreen2
- Owner: dashpilot
- Created: 2023-02-21T12:12:25.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-26T11:47:09.000Z (over 3 years ago)
- Last Synced: 2025-01-14T12:49:11.714Z (over 1 year ago)
- Language: Svelte
- Homepage: https://editscreen2.vercel.app
- Size: 912 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Editscreen
On-page CMS and page-builder that works with any front-end or back-end language. The included demo uses a simple Handlebars template, but you can use it with a JS framework like Vue or a backend language like Nodejs or php.
## How to make a section editable?
Just add a class of `editable`, a unique `id` and a `data-fields` attribute, like so:
```
This title is now editable
This body text is now editable
```
If the user clicks on the text, the editor will open with the defined fields.
The data-fields attribute contains key value pairs where the first is the name of the field, and the second is the type of field. Current field types are:
- txt: single-line text input
- txta: multi-line textarea
- rte: rich text editor
- mde: markdown editor
- icon: font awesome icon picker
- img: single image upload
- gal: multi image-upload (gallery)
- del: option to delete the post
## Installation
To install the editor, add the following code to the head of each page:
```
```
## Configuration
Currently, the following options are available:
```
cfg = {};
cfg.basePath = 'https://editscreen.vercel.app/'; // The URL of your site, with trailing slash
cfg.dataPath = 'data.json'; // where will the json data be stored
cfg.apiPath = '/api/';
cfg.assetsPath = '/assets/'; // where is the assets folder?
cfg.imgPath = ''; // where are images stored?
cfg.imgWidth = '400'; // image width
cfg.buttons = ['add', 'design', 'settings', 'publish']; // which buttons should be displayed in the interface?
cfg.layoutPreview = 'png'; // preview images in `/assets/layouts`, remove if you don't want a preview
cfg.settings = ['layouts']; // which settings should be displayed on the `settings` screen
cfg.layouts = ['banner', 'post', 'features', 'featured', 'news'];
cfg.rte = ['h1', 'h2', 'h3'] // add buttons to the rich text editor
```
## Saving data
Every time the user saves data, the render() function is called. To hook into your back-end, define the render function, for example:
```
function render(data) {
let opts = {};
opts.type = 'json';
opts.page = window.page;
opts.data = data;
fetch('/api/save', {
method: 'post',
body: JSON.stringify(opts)
}).then(function(response) {
return response.text();
}).then(function(data) {
document.querySelector('#page').innerHTML = data;
});
}
```
## Updates - 2-2023
1. the variable window.category should now always be updated by the router. It is used by the CMS
2. the website should listen for the "update" even on the body, to update the data
## Demo
https://editscreen2.vercel.app