Sujay's Free Tools(Code of text editor)
Creating a complete text editor with all features involves a significant amount of code, and it might be too lengthy to provide here. However, I can give you a basic example with the essential features, including a download option. Please note that this is a simplified version, and you might want to enhance it based on your specific requirements.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Editor</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
#editor {
flex: 1;
padding: 20px;
font-size: 16px;
}
#editor textarea {
width: 100%;
height: 100%;
border: none;
resize: none;
}
#toolbar {
display: flex;
justify-content: space-between;
background-color: #333;
color: #fff;
padding: 10px;
}
#download {
cursor: pointer;
}
</style>
</head>
<body>
<div id="toolbar">
<div>
<label for="file-input">Choose File:</label>
<input type="file" id="file-input" style="display:none;">
<button onclick="loadFile()">Load</button>
</div>
<div>
<button onclick="boldText()">Bold</button>
<button onclick="italicizeText()">Italic</button>
<button onclick="underlineText()">Underline</button>
</div>
<div>
<button id="download" onclick="downloadText()">Download</button>
</div>
</div>
<div id="editor">
<textarea id="textArea" placeholder="Start typing..."></textarea>
</div>
<script>
function boldText() {
document.execCommand('bold', false, null);
}
function italicizeText() {
document.execCommand('italic', false, null);
}
function underlineText() {
document.execCommand('underline', false, null);
}
function downloadText() {
const text = document.getElementById('textArea').value;
const blob = new Blob([text], { type: 'text/plain' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'document.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
function loadFile() {
const input = document.getElementById('file-input');
const file = input.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
const textArea = document.getElementById('textArea');
textArea.value = e.target.result;
};
reader.readAsText(file);
}
}
</script>
</body>
</html>
```
This example provides a simple text editor with basic formatting options (bold, italic, underline), a file load option, and a download button for saving the content as a .txt file. You can further expand and customize this code based on your specific requirements.
Comments
Post a Comment