htmword.github.io/app.js at main · juicemj14/htmword.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
// Basic Word-like editor using document.execCommand for quick demo.
const editor = document.getElementById('editor');
const toolbar = document.querySelector('.toolbar');

// Delegate toolbar button clicks
toolbar.addEventListener('click', (e) => {
  const btn = e.target.closest('button[data-cmd]');
  if (btn) {
    const cmd = btn.getAttribute('data-cmd');
    document.execCommand(cmd, false, null);
    editor.focus();
  }
});

// Font name & size
document.getElementById('fontName').addEventListener('change', (e) => {
  document.execCommand('fontName', false, e.target.value);
  editor.focus();
});

document.getElementById('fontSize').addEventListener('change', (e) => {
  document.execCommand('fontSize', false, e.target.value);
  editor.focus();
});

// Colors
document.getElementById('foreColor').addEventListener('input', (e) => {
  document.execCommand('foreColor', false, e.target.value);
  editor.focus();
});

document.getElementById('hiliteColor').addEventListener('input', (e) => {
  // Some browsers use backColor/hiliteColor
  document.execCommand('hiliteColor', false, e.target.value);
  document.execCommand('backColor', false, e.target.value);
  editor.focus();
});

// Link insertion
document.getElementById('createLink').addEventListener('click', () => {
  const url = prompt('Enter a URL:', 'https://');
  if (url) {
    document.execCommand('createLink', false, url);
  }
  editor.focus();
});

// Insert image
document.getElementById('insertImage').addEventListener('click', () => {
  const url = prompt('Enter an image URL:', 'https://');
  if (url) {
    document.execCommand('insertImage', false, url);
  }
  editor.focus();
});

// Undo/redo
document.getElementById('undo').addEventListener('click', () => { document.execCommand('undo'); editor.focus(); });
document.getElementById('redo').addEventListener('click', () => { document.execCommand('redo'); editor.focus(); });

// File open
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (ev) => {
  const file = ev.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = (e) => {
    const text = e.target.result;
    if (file.name.match(/\.html?$|\.htm$/i)) {
      editor.innerHTML = text;
    } else {
      // plain text
      editor.innerText = text;
    }
  };
  reader.readAsText(file);
});

// Downloads
function download(filename, content, mime) {
  const blob = new Blob([content], { type: mime });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  a.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

function getFullHtml() {
  return `<!doctype html>\n<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Export</title></head><body>\n${editor.innerHTML}\n</body></html>`;
}

document.getElementById('downloadHtml').addEventListener('click', () => {
  download('document.html', getFullHtml(), 'text/html');
});

document.getElementById('downloadDoc').addEventListener('click', () => {
  // Many word processors accept HTML saved with .doc and MIME application/msword
  download('document.doc', getFullHtml(), 'application/msword');
});

document.getElementById('downloadTxt').addEventListener('click', () => {
  download('document.txt', editor.innerText, 'text/plain');
});

// Print
document.getElementById('printBtn').addEventListener('click', () => {
  const w = window.open('', '_blank');
  w.document.write(getFullHtml());
  w.document.close();
  w.focus();
  setTimeout(() => w.print(), 300);
});

// Nice: Ctrl+S save to HTML (prevent browser save)
window.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
    e.preventDefault();
    download('document.html', getFullHtml(), 'text/html');
  }
});

// Minimal autosave to localStorage (optional convenience)
setInterval(() => {
  try { localStorage.setItem('online-word-autosave', editor.innerHTML); } catch (err) {}
}, 5000);

// Load from autosave on startup if present
window.addEventListener('load', () => {
  const saved = localStorage.getItem('online-word-autosave');
  if (saved && confirm('Load autosaved content?')) {
    editor.innerHTML = saved;
  }
});