INIT frontend
This commit is contained in:
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Rich Text Editor - Free for Business</title>
|
||||
|
||||
<!-- Quill CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background: #f4f6f9;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #1a73e8;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
border: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
#editor {
|
||||
height: 400px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 16px;
|
||||
background: #1a73e8;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #1557b0;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #5f6368;
|
||||
}
|
||||
|
||||
button.secondary:hover {
|
||||
background: #484c50;
|
||||
}
|
||||
|
||||
#output {
|
||||
margin-top: 30px;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Rich Text Editor (Quill.js - MIT License)</h1>
|
||||
</header>
|
||||
|
||||
<div class="editor-wrapper">
|
||||
<!-- Toolbar will be injected here by Quill -->
|
||||
<div id="toolbar"></div>
|
||||
|
||||
<!-- Editor -->
|
||||
<div id="editor">
|
||||
<p>Start typing your content here...</p>
|
||||
<p>Use the toolbar to <strong>bold</strong>, <em>italicize</em>, add <u>underline</u>, or insert lists and links.</p>
|
||||
</div>
|
||||
|
||||
<!-- Custom Controls -->
|
||||
<div class="controls">
|
||||
<button id="save-html">Save as HTML</button>
|
||||
<button id="get-json">Get JSON</button>
|
||||
<button class="secondary" id="clear">Clear Editor</button>
|
||||
<button class="secondary" id="load-sample">Load Sample</button>
|
||||
</div>
|
||||
|
||||
<!-- Output Display -->
|
||||
<pre id="output"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quill JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
|
||||
|
||||
<script>
|
||||
// Initialize Quill editor
|
||||
const quill = new Quill('#editor', {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: [
|
||||
[{ 'header': [1, 2, 3, false] }],
|
||||
['bold', 'italic', 'underline'],
|
||||
['link', 'image'],
|
||||
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||||
[{ 'align': [] }],
|
||||
['clean']
|
||||
]
|
||||
},
|
||||
placeholder: 'Compose an epic...'
|
||||
});
|
||||
|
||||
// Custom Buttons
|
||||
document.getElementById('save-html').addEventListener('click', () => {
|
||||
const html = quill.root.innerHTML;
|
||||
const output = document.getElementById('output');
|
||||
output.textContent = html;
|
||||
output.style.display = 'block';
|
||||
alert('HTML copied to output below!');
|
||||
});
|
||||
|
||||
document.getElementById('get-json').addEventListener('click', () => {
|
||||
const delta = quill.getContents();
|
||||
const output = document.getElementById('output');
|
||||
output.textContent = JSON.stringify(delta, null, 2);
|
||||
output.style.display = 'block';
|
||||
alert('Delta JSON copied to output!');
|
||||
});
|
||||
|
||||
document.getElementById('clear').addEventListener('click', () => {
|
||||
if (confirm('Clear all content?')) {
|
||||
quill.setContents([]);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('load-sample').addEventListener('click', () => {
|
||||
quill.setContents({
|
||||
ops: [
|
||||
{ insert: 'Welcome to Your Rich Text Editor!\n', attributes: { header: 1 } },
|
||||
{ insert: 'This is ' },
|
||||
{ insert: 'bold', attributes: { bold: true } },
|
||||
{ insert: ', this is ' },
|
||||
{ insert: 'italic', attributes: { italic: true } },
|
||||
{ insert: ', and this is a ' },
|
||||
{ insert: 'link', attributes: { link: 'https://quilljs.com' } },
|
||||
{ insert: '.\n\n' },
|
||||
{ insert: 'Features include:\n', attributes: { list: 'bullet' } },
|
||||
{ insert: 'Images & embeds\n', attributes: { list: 'bullet' } },
|
||||
{ insert: 'Custom styles & output\n', attributes: { list: 'bullet' } },
|
||||
{ insert: '100% free for business use\n', attributes: { list: 'bullet' } }
|
||||
]
|
||||
});
|
||||
});
|
||||
/*
|
||||
* Rich Text Editor powered by Quill.js v2.0.2
|
||||
* © 2015–2025 Slab, Inc. and contributors
|
||||
* MIT License – https://quilljs.com
|
||||
* Thank you to the Quill team for this excellent open-source editor.
|
||||
*/
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user