❤
npm
Sign UpSign In

static-edit
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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
}

Readme

Keywords

none

Package Sidebar

Install

npm i static-edit

Repository

github.com/thomasruiz/static-edit

Homepage

github.com/thomasruiz/static-edit#readme

Weekly Downloads

1

Version

1.0.0

License

MIT

Last publish

Collaborators

  • thomasruiz
Try on RunKit
Report malware