198 lines
5.1 KiB
HTML
198 lines
5.1 KiB
HTML
<!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> |