Content Editable JS
Content editable helps you to interact with your HTML content. Just add some attributes and let the magic happen!
Basic usage
Please note that library should not be used in production yet!
Add the library
<!-- With CDN --><!-- Locally -->
Note: If you want to integrate content-editable-js to your own JS app, use npm npm install content-editable-js --save
Call the library
Prepare your HTML
Hello world! Lorem ipsum dolor sit amet
Documentation
Editable
An Editable is an HTML element that can be edited.
-
data-editable="KEY"
WhereKEY
is the name of the editable. -
data-editable-type="TYPE"
WhereTYPE
is the type of the editable. Optional.
Name | Description |
---|---|
text |
(default) Simple text element without HTML |
html |
Simple element with HTML content |
image |
Simple image content |
Groups
A Group is a collection of editables which are sent together to a same endpoint. Groups must be configured at the parent of your editables.
-
data-group="KEY"
WhereKEY
is the name of the group. It must be unique. -
data-group-endpoint="URL"
WhereURL
is your endpoint for the included editables.
Example
Monday to Friday 8am to 8pm Saturday 10am to 7pm
Methods
The function contentEditable()
returns an App instance with some methods:
Method | Description |
---|---|
show() | Show the app and init editables |
hide() | Hide the app |
Extend
Editable types
TODO
Recorder
Recorder is in charge to post changes to your endpoints. When initializing you can replace the default one.
Just bring your own object (or class) with just a function named save(changes = [])
.
let contentEditable = contentEditable
Toolbar
The toolbar is the default component responsible for showing edit buttons. You can replace it at the initialization.
Just implement an object with the functions show()
and hide()
.
The library will hide the default one immediatly and replace it with your own.
let contentEditable = contentEditable
Localization
For now, this library is translated in English and French.
Localizations are hard-coded in src/classes/i18n.js
.
Note that the locale is based on the HTML lang attribute.
Backend
You can easily develop your own backend (in PHP, node.js, etc...), when changes are made, your endpoint will be reached with a POST request, containing:
- Your configured headers
- Array of objects containing the editable name and the editable value
Server
This library provides a basic PHP server to test your integration. Clone this repo and just run the following PHP command at the root:
php -S 127.0.0.1:1080
You now have the access to:
- The demo page: http://127.0.0.1:1080/index.html
- The server endpoint: http://127.0.0.1:1080/server.php
Support
Content Editable is built for modern web browsers. No supports for IE. For bugs and suggestions, open an issue here.
Contribute
Feel free to make a PR! Once cloned, use these commands:
npm install # or yarn install
npm run dev # or npm run watch
npm run prod # before commit
Licence
MIT