Skip to content

Add auto-save and import/export feature to Grid Editor #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add auto-save and import/export feature to Grid Editor #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions AUTO_SAVE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
## ✨ New Feature: Auto Save & Layout Import/Export

This version introduces **auto save** and **import/export** support for Grid Editor.

### 🧩 Features

- ⏱️ **Auto Save**
Automatically saves your layout every 5 seconds to `localStorage`, so your work is not lost even on accidental refresh.

- 📥 **Import Saved Layout**
Reload your layout from localStorage on page load or via button.

- 🧾 **Export HTML**
Export the edited HTML layout for saving or sharing.

### 🧪 Demo

```bash
open examples/index-autosave.html
104 changes: 104 additions & 0 deletions dist/ckeditor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- CSS dependencies -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<!-- Javascript dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<!-- Ckeditor js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.9.2/ckeditor.js"></script>

<!-- Grid editor CSS -->
<link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
<!-- Grid editor javascript -->
<script src="../dist/jquery.grideditor.min.js"></script>

<script>
$(function() {
// Initialize grid editor
$('#myGrid').gridEditor({
new_row_layouts: [[12], [6, 6], [9, 3]],
content_types: ['ckeditor'],
ckeditor: {
config: {
on: {
instanceReady: function(evt) {
var instance = this;
console.log('instance ready', evt, instance);
}
}
}
}
});

// Get resulting html
var html = $('#myGrid').gridEditor('getHtml');
console.log(html);
});
</script>

<title>Grid Editor example</title>
</head>
<body>

<div class="container">
<div id="myGrid">

<div class="row">
<div class="col-md-12">
<h1>Lorem ipsum dolor sit amet, consectetur</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit exercitationem eaque aperiam rem quia quibusdam dolor ducimus quo similique eos pariatur nostrum aliquam nam eius, doloremque quis voluptatum unde. Porro voluptates aspernatur voluptate ipsam, magni vero. Accusamus, iusto tempore id!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae laboriosam, excepturi quas.</p>
</div>
</div>

<div class="row">
<div class="col-md-4">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facilis vel aliquam aspernatur dolor placeat totam saepe perferendis. Odio quia vel sed eveniet cupiditate, illum doloremque sint veniam eum? Corporis?</p>
</div>
<div class="col-md-4">
<h2>Pariatur reprehenderit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo adipisci ipsa, consequuntur cum, sunt dolores veniam. Enim inventore in dolore deserunt vitae sequi nemo!</p>
</div>
<div class="col-md-4">
<h2>Pariatur reprehenderit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea excepturi ducimus numquam aut error corporis aspernatur ipsum quos eius culpa!</p>
</div>
</div>

<div class="row">
<div class="col-md-8">
<h2>Lorem ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro distinctio atque molestiae optio, consequuntur? Iusto ratione cumque dolor aut dolore!</p>

<div class="row">
<div class="col-md-6">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis facilis molestias voluptatum laudantium fuga ratione tempora rem dolor dicta rerum vero ut, suscipit ex qui amet quam vel cupiditate quaerat minus assumenda reiciendis, similique omnis delectus! Autem, repudiandae cumque eaque?</p>
</div>
<div class="col-md-6">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestiae quaerat illum, consequuntur iusto aspernatur quam provident? Possimus!</p>
</div>
</div>
</div>

<div class="col-md-4">
<h2>Lusto ratione</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis fugit quasi officiis id laudantium error aut ut aperiam dicta saepe non vel, cupiditate illum ipsam velit deleniti natus incidunt impedit molestias dolore quos dolores enim. Aliquid ipsam eaque consequuntur quaerat, suscipit a in. Praesentium repudiandae quibusdam recusandae sequi eligendi quos, dignissimos, officiis officia minima necessitatibus eaque consequatur in id adipisci qui minus voluptatum quae debitis, quas maxime iure. Tempore vero unde quia reiciendis ad beatae voluptate omnis, ipsa expedita ab, quasi, neque. Doloribus, pariatur. Aut hic voluptate.</p>
</div>
</div>

</div> <!-- /#myGrid -->
</div> <!-- /.container -->

</body>
</html>
106 changes: 106 additions & 0 deletions dist/summernote.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- CSS dependencies -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<!-- Javascript dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<!-- Summernote CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.1/summernote.min.css" />
<!-- Summernote js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.1/summernote.min.js"></script>

<!-- Grid editor CSS -->
<link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
<!-- Grid editor javascript -->
<script src="../dist/jquery.grideditor.min.js"></script>

<script>
$(function() {
// Initialize grid editor
$('#myGrid').gridEditor({
new_row_layouts: [[12], [6, 6], [9, 3]],
content_types: ['summernote'],
summernote: {
config: {
callbacks: {
onInit: function() {
var element = this;
console.log('init done', element);
}
}
}
}
});

// Get resulting html
var html = $('#myGrid').gridEditor('getHtml');
console.log(html);
});
</script>

<title>Grid Editor example</title>
</head>
<body>

<div class="container">
<div id="myGrid">

<div class="row">
<div class="col-md-12">
<h1>Lorem ipsum dolor sit amet, consectetur</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit exercitationem eaque aperiam rem quia quibusdam dolor ducimus quo similique eos pariatur nostrum aliquam nam eius, doloremque quis voluptatum unde. Porro voluptates aspernatur voluptate ipsam, magni vero. Accusamus, iusto tempore id!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae laboriosam, excepturi quas.</p>
</div>
</div>

<div class="row">
<div class="col-md-4">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facilis vel aliquam aspernatur dolor placeat totam saepe perferendis. Odio quia vel sed eveniet cupiditate, illum doloremque sint veniam eum? Corporis?</p>
</div>
<div class="col-md-4">
<h2>Pariatur reprehenderit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo adipisci ipsa, consequuntur cum, sunt dolores veniam. Enim inventore in dolore deserunt vitae sequi nemo!</p>
</div>
<div class="col-md-4">
<h2>Pariatur reprehenderit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea excepturi ducimus numquam aut error corporis aspernatur ipsum quos eius culpa!</p>
</div>
</div>

<div class="row">
<div class="col-md-8">
<h2>Lorem ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro distinctio atque molestiae optio, consequuntur? Iusto ratione cumque dolor aut dolore!</p>

<div class="row">
<div class="col-md-6">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis facilis molestias voluptatum laudantium fuga ratione tempora rem dolor dicta rerum vero ut, suscipit ex qui amet quam vel cupiditate quaerat minus assumenda reiciendis, similique omnis delectus! Autem, repudiandae cumque eaque?</p>
</div>
<div class="col-md-6">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestiae quaerat illum, consequuntur iusto aspernatur quam provident? Possimus!</p>
</div>
</div>
</div>

<div class="col-md-4">
<h2>Lusto ratione</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis fugit quasi officiis id laudantium error aut ut aperiam dicta saepe non vel, cupiditate illum ipsam velit deleniti natus incidunt impedit molestias dolore quos dolores enim. Aliquid ipsam eaque consequuntur quaerat, suscipit a in. Praesentium repudiandae quibusdam recusandae sequi eligendi quos, dignissimos, officiis officia minima necessitatibus eaque consequatur in id adipisci qui minus voluptatum quae debitis, quas maxime iure. Tempore vero unde quia reiciendis ad beatae voluptate omnis, ipsa expedita ab, quasi, neque. Doloribus, pariatur. Aut hic voluptate.</p>
</div>
</div>

</div> <!-- /#myGrid -->
</div> <!-- /.container -->

</body>
</html>
45 changes: 45 additions & 0 deletions dist/wrap_content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- CSS dependencies -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<!-- Javascript dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/jquery.tinymce.min.js"></script>

<!-- Grid editor CSS -->
<link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
<!-- Grid editor javascript -->
<script src="../dist/jquery.grideditor.min.js"></script>

<script>
$(function() {
// Initialize grid editor
$('#myGrid').gridEditor({
new_row_layouts: [[12], [6, 6], [9, 3]],
content_types: ['tinymce'],
});

// Get resulting html
var html = $('#myGrid').gridEditor('getHtml');
console.log(html);
});
</script>

<title>Grid Editor example</title>
</head>
<body>
<div id="myGrid">
<h1>Hello!</h1>
<p>Test</p>
</div>

</body>
</html>
102 changes: 102 additions & 0 deletions example/index-autosave.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Editor with Auto Save and Import/Export</title>

<!-- CSS dependencies -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
<link rel="stylesheet" href="./grideditor.css" />

<!-- JS dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/jquery.tinymce.min.js"></script>
<script src="./jquery.grideditor.min.js"></script>

<script>
$(function() {
// Initialize grid editor
$('#myGrid').gridEditor({
new_row_layouts: [[12], [6,6], [9,3]],
content_types: ['tinymce'],
});

// // Get resulting html
// var html = $('#myGrid').gridEditor('getHtml');
// console.log(html);
});
</script>
</head>
<body>
<div class="container py-3">
<h2>Grid Editor 示例 - 自动保存 + 导入导出</h2>
<div class="mb-3">
<button id="exportBtn" class="btn btn-primary">导出布局</button>
<input type="file" id="importInput" class="btn btn-secondary" accept=".html">
<button id="resetBtn" class="btn btn-danger">清除草稿</button>
</div>

<form id="editorForm">
<div id="myGrid"></div>
</form>
</div>
<script>
const LOCAL_STORAGE_KEY = 'gridEditorLayout';

function initEditor(initialContent = '') {
const $grid = $('#myGrid');
$grid.html(initialContent);
$grid.gridEditor({
new_row_layouts: [[12], [6,6], [4,4,4]],
content_types: ['tinymce']
});
}

function autoSave() {
const html = $('#myGrid').gridEditor('getHtml');
localStorage.setItem(LOCAL_STORAGE_KEY, html);
}

$(function () {
const saved = localStorage.getItem(LOCAL_STORAGE_KEY);
initEditor(saved || $('#myGrid').html());


setInterval(autoSave, 5000);


$('#exportBtn').on('click', () => {
const html = $('#myGrid').gridEditor('getHtml');
const blob = new Blob([html], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'layout.html';
a.click();
URL.revokeObjectURL(url);
});

$('#importInput').on('change', function (e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function (e) {
$('#myGrid').gridEditor('remove');
initEditor(e.target.result);
autoSave();
};
reader.readAsText(file);
});

$('#resetBtn').on('click', function () {
localStorage.removeItem(LOCAL_STORAGE_KEY);
location.reload();
});
});
</script>
</body>
</html>
Loading