Webサイトをブラウジングしていてちょっとメモを取りたいという時に、テキストエディタやメモなどのアプリケーションを開くのが面倒な時に事前にこのhtmlファイルをブラウザから開いておけば、タブを移動するだけでメモが取れるだけのシンプルなコード。
使い方はいたって簡単で、このコードをhtmlファイルで保存し、ファイルからこれを開くだけ。
ローカルに保存されるので、外部からアクセスされることもなく、ネットがつながらなくても、ここに書いたものは保存できます。
追加機能や手直ししてほしい部分があればコメントにお願いいたします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Text Editor</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
.editor {
min-height: 100vh;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1rem;
font-size: 1rem;
line-height: 1.5;
outline: none;
white-space: pre-wrap;
overflow-y: auto;
position: relative;
counter-reset: line;
}
.editor div {
position: relative;
padding-left: 3rem;
}
.editor div::before {
counter-increment: line;
content: counter(line);
position: absolute;
left: 0;
top: 0;
width: 2.5rem;
text-align: right;
padding-right: 0.5rem;
color: #94a3b8;
font-size: 0.875rem;
line-height: 1.5;
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex justify-center items-center">
<div class="w-full max-w-6xl bg-white shadow-md rounded-lg p-6">
<div class="flex justify-between items-center mb-4">
<h1 class="text-xl font-bold">Web Text Editor</h1>
<div>
<button id="saveBtn" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Save</button>
<button id="exportBtn" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 ml-2">Export as TXT</button>
</div>
</div>
<div id="editor" contenteditable="true" class="editor bg-gray-50"></div>
</div>
<script>
// Load saved content from localStorage
const editor = document.getElementById('editor');
const saveBtn = document.getElementById('saveBtn');
const exportBtn = document.getElementById('exportBtn');
const savedContent = localStorage.getItem('editorContent');
if (savedContent) {
editor.innerHTML = savedContent.split('\n').map(line => `<div>${line}</div>`).join('');
}
// Save content to localStorage
saveBtn.addEventListener('click', () => {
const content = Array.from(editor.children).map(div => div.textContent).join('\n');
localStorage.setItem('editorContent', content);
alert('Content saved successfully!');
});
// Export content as TXT file
exportBtn.addEventListener('click', () => {
const content = Array.from(editor.children).map(div => div.textContent).join('\n');
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'editor-content.txt';
a.click();
URL.revokeObjectURL(url);
});
// Optional: Add basic styling shortcuts (e.g., bold, italic)
editor.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'b') {
document.execCommand('bold');
e.preventDefault();
}
if (e.ctrlKey && e.key === 'i') {
document.execCommand('italic');
e.preventDefault();
}
});
</script>
</body>
</html>実際に表示すると下記のようになります
