static-edit
v1.0.0
Published
A simple yet powerful static pages editor
Downloads
12
Readme
Static-Edit
A simple yet powerful static website editor.
Installation
You can install this via npm or yarn.
$ yarn add static-edit
# OR
$ npm install static-edit
You can also download the file directly from here: - static-edit.min.js - static-edit.js
Getting started
Add the script at the end of the page that you want to edit.
<script src="static-edit.js"></script>
Initialize the script right after that line
<script>
(function () {
new StaticEdit.Editor()
})()
</script>
Add the HTML class editable
to any content that you want to edit.
For example:
<p class="editable">Hello world!</p>
<h1 class="editable">Foo Bar</h1>
<img class="editable" src="img/my-img.png">
<div class="bg-editable" style="background-image: url(img/bg-img.png)"></div>
Options
You can customize the editor with the following options (the examples show the default):
<script>
(function () {
new StaticEdit.Editor({
saveButton: false, // Whether to show the save button or not
selector: '.editable', // The selector to use for all the elements
bgSelector: '.bg-editable', // The selector to use for all background image edition
})
})()
</script>
API
The following events are dispatched to the current window:
window.addEventListener('static_edit.editing', function (e) {
// An editable element was clicked
// e.detail.elem: the element that is changing
// e.detail.oldValue: the current value of the element
})
window.addEventListener('static_edit.edited', function (e) {
// An editable element was changed
// e.detail.elem: the element that has been changed
// e.detail.oldValue: the old value of the element
// e.detail.newValue: the new value of the element
})
window.addEventListener('static_edit.saving', function (e) {
// The "save" button was clicked
// e.detail.changed: contains a list of the elements that have been changed
})
Elem is a class that have the following public method/properties:
class Element {
value: string // the current value of the element
element: HTMLElement // the corresponding element in the DOM
hasChanged: boolean // whether the element has changed or not
}