<!DOCTYPE html>
<html>
<head>
<title>Advanced Text Editor</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.editor-container {
display: flex;
flex-direction: column;
height: 100vh;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.toolbar {
display: flex;
align-items: center;
padding: 8px;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.toolbar button,
.toolbar select {
margin-right: 8px;
background-color: transparent;
border: none;
cursor: pointer;
}
.toolbar select {
cursor: pointer;
}
.editor {
flex-grow: 1;
padding: 16px;
border: 1px solid #ccc;
outline: none;
font-size: 14px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
background-color: #f0f0f0;
border-top: 1px solid #ccc;
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
}
.status-bar span {
margin-right: 16px;
}
</style>
</head>
<body>
<div class="editor-container">
<div class="toolbar">
<button id="boldButton"><b>B</b></button>
<button id="italicButton"><i>I</i></button>
<button id="underlineButton"><u>U</u></button>
<button id="strikeThroughButton"><s>S</s></button>
<select id="fontFamilySelect">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
</select>
<select id="fontSizeSelect">
<option value="12">12px</option>
<option value="14">14px</option>
<option value="16">16px</option>
</select>
<input type="color" id="textColorInput">
<input type="color" id="bgColorInput">
<button id="undoButton">Undo</button>
<button id="redoButton">Redo</button>
</div>
<div contenteditable="true" class="editor" id="editor"></div>
<div class="status-bar">
<span id="wordCount"></span>
<span id="cursorPosition"></span>
</div>
</div>
<script>
// Wait for the document to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Get the editor element
var editor = document.getElementById('editor');
// Get the toolbar buttons
var boldButton= document.getElementById('boldButton');
var italicButton = document.getElementById('italicButton');
var underlineButton = document.getElementById('underlineButton');
var strikeThroughButton = document.getElementById('strikeThroughButton');
var fontFamilySelect = document.getElementById('fontFamilySelect');
var fontSizeSelect = document.getElementById('fontSizeSelect');
var textColorInput = document.getElementById('textColorInput');
var bgColorInput = document.getElementById('bgColorInput');
var undoButton = document.getElementById('undoButton');
var redoButton = document.getElementById('redoButton');
// Add event listeners to the toolbar buttons
boldButton.addEventListener('click', function() {
document.execCommand('bold', false, null);
});
italicButton.addEventListener('click', function() {
document.execCommand('italic', false, null);
});
underlineButton.addEventListener('click', function() {
document.execCommand('underline', false, null);
});
strikeThroughButton.addEventListener('click', function() {
document.execCommand('strikeThrough', false, null);
});
fontFamilySelect.addEventListener('change', function() {
var fontFamily = fontFamilySelect.value;
document.execCommand('fontName', false, fontFamily);
});
fontSizeSelect.addEventListener('change', function() {
var fontSize = fontSizeSelect.value;
document.execCommand('fontSize', false, fontSize);
});
textColorInput.addEventListener('change', function() {
var textColor = textColorInput.value;
document.execCommand('foreColor', false, textColor);
});
bgColorInput.addEventListener('change', function() {
var bgColor = bgColorInput.value;
document.execCommand('backColor', false, bgColor);
});
undoButton.addEventListener('click', function() {
document.execCommand('undo', false, null);
});
redoButton.addEventListener('click', function() {
document.execCommand('redo', false, null);
});
// Update word count
function updateWordCount() {
var content = editor.innerText;
var words = content.trim().split(/\s+/).length;
document.getElementById('wordCount').textContent = 'Word Count: ' + words;
}
// Update cursor position
function updateCursorPosition() {
var selection = window.getSelection();
var caretOffset = selection.focusOffset;
document.getElementById('cursorPosition').textContent = 'Cursor Position: ' + caretOffset;
}
// Add event listeners to update word count and cursor position
editor.addEventListener('input', function() {
updateWordCount();
});
editor.addEventListener('keyup', function() {
updateWordCount();
updateCursorPosition();
});
editor.addEventListener('mouseup', function() {
updateCursorPosition();
});
});
</script>
</body>
</html>
Comments
Post a Comment