78 lines
1.9 KiB
JavaScript
78 lines
1.9 KiB
JavaScript
|
// Editor module JavaScript using Alpine.js
|
||
|
|
document.addEventListener('alpine:init', () => {
|
||
|
|
Alpine.data('editor', () => ({
|
||
|
|
fileName: 'Document 1',
|
||
|
|
fontSize: '12',
|
||
|
|
fontFamily: 'Calibri',
|
||
|
|
textColor: '#000000',
|
||
|
|
highlightColor: '#ffff00',
|
||
|
|
activeTab: 'home',
|
||
|
|
zoom: 100,
|
||
|
|
pages: [1],
|
||
|
|
content: '',
|
||
|
|
|
||
|
|
init() {
|
||
|
|
// Initialize with default content
|
||
|
|
this.content = `
|
||
|
|
<h1 style="text-align: center; font-size: 24px; margin-bottom: 20px;">${this.fileName}</h1>
|
||
|
|
<p><br></p>
|
||
|
|
<p>Start typing your document here...</p>
|
||
|
|
<p><br></p>
|
||
|
|
`;
|
||
|
|
},
|
||
|
|
|
||
|
|
// Ribbon tab switching
|
||
|
|
setActiveTab(tab) {
|
||
|
|
this.activeTab = tab;
|
||
|
|
},
|
||
|
|
|
||
|
|
// Formatting methods
|
||
|
|
formatBold() {
|
||
|
|
document.execCommand('bold', false);
|
||
|
|
},
|
||
|
|
formatItalic() {
|
||
|
|
document.execCommand('italic', false);
|
||
|
|
},
|
||
|
|
formatUnderline() {
|
||
|
|
document.execCommand('underline', false);
|
||
|
|
},
|
||
|
|
alignLeft() {
|
||
|
|
document.execCommand('justifyLeft', false);
|
||
|
|
},
|
||
|
|
alignCenter() {
|
||
|
|
document.execCommand('justifyCenter', false);
|
||
|
|
},
|
||
|
|
alignRight() {
|
||
|
|
document.execCommand('justifyRight', false);
|
||
|
|
},
|
||
|
|
alignJustify() {
|
||
|
|
document.execCommand('justifyFull', false);
|
||
|
|
},
|
||
|
|
|
||
|
|
// Zoom controls
|
||
|
|
zoomOut() {
|
||
|
|
this.zoom = Math.max(50, this.zoom - 10);
|
||
|
|
this.updateZoom();
|
||
|
|
},
|
||
|
|
zoomIn() {
|
||
|
|
this.zoom = Math.min(200, this.zoom + 10);
|
||
|
|
this.updateZoom();
|
||
|
|
},
|
||
|
|
updateZoom() {
|
||
|
|
document.querySelector('.pages-container').style.transform = `scale(${this.zoom / 100})`;
|
||
|
|
},
|
||
|
|
|
||
|
|
// Save document
|
||
|
|
saveDocument() {
|
||
|
|
const content = document.getElementById('editor-content').innerHTML;
|
||
|
|
const blob = new Blob([content], { type: 'text/html' });
|
||
|
|
const url = URL.createObjectURL(blob);
|
||
|
|
const a = document.createElement('a');
|
||
|
|
a.href = url;
|
||
|
|
a.download = `${this.fileName}.html`;
|
||
|
|
a.click();
|
||
|
|
URL.revokeObjectURL(url);
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
});
|