Hashedit aims to make that notion a reality. It is a framework agnostic WYSIWYG editor for static web sites. Hashedit supports inline rich text editing; the creation and destruction of HTML blocks (and elements); editing of links and images; and drag-and-drop reordering powered by the fantastic Sortable Library. Hashedit is built in plain JS with just the Sortable and Dropzone dependency.
bower install hashedit
<link type="text/css" href="/bower_components/hashedit/dist/hashedit-min.css" rel="stylesheet">
<script src="/bower_components/hashedit/dist/hashedit-min.js"></script>
This script looks for the #edit in the URL and then writes the annotated (e.g. HTML modified with data-ref attributes) HTML from localStorage to the browser.
<!-- #edit -->
<script>function write(){html=localStorage.getItem(key),document.body.innerHTML=html}if(-1!=window.location.href.indexOf("#edit")){var key=window.location.href;null!=localStorage.getItem(key)&&write()}window.onhashchange=function(){-1!=window.location.href.indexOf("#edit")&&location.reload()};</script>
You specify which elements are editable using the hashedit attribute. You must also specify a hashedit-selector attribute so the app knows which HTML to replace when the save button is clicked.
<div id="editable-div" hashedit hashedit-selector="#editable-div">
The JS looks for the #edit in the URL and then calls setup on the hashedit singleton. You must specify a path to the library and an array of selectors to make sortable.
<script>
// setup hashedit
hashedit.setup({
path: '/node_modules/hashedit/',
stylesheet: ['/node_modules/hashedit/dist/hashedit-min.css'],
sortable: ['.column']
});
</script>
bower install Sortable
bower install dropzone
bower install fetch
npm install --global gulp
npm install --save-dev gulp
npm install --save-dev gulp-concat
npm install --save-dev gulp-minify-css
npm install --save-dev gulp-rename
npm install --save-dev gulp-minify
gulp
http://rubaxa.github.io/Sortable/
https://github.com/github/fetch
https://elements.polymer-project.org/elements/iron-icons?view=demo:demo/index.html