<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="row mt-1">
<div class="col">
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('bold', null)"><i class="fa fa-bold"></i></button>
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('italic', null)"><i class="fa fa-italic"></i></button>
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('underline', null)"><i class="fa fa-underline"></i></button>
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('strikethrough', null)"><i class="fa fa-strikethrough"></i></button>
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('subscript', null)"><i class="fa fa-subscript"></i></button>
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('superscript', null)"><i class="fa fa-superscript"></i></button>
|
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('justifyLeft', null)"><i class="fa fa-align-left"></i></button>
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('justifyCenter', null)"><i class="fa fa-align-center"></i></button>
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('justifyRight', null)"><i class="fa fa-align-right"></i></button>
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('justifyFull', null)"><i class="fa fa-align-justify"></i></button>
|
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('insertParagraph', null)"><i class="fa fa-paragraph"></i></button>
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('insertOrderedList', null)"><i class="fa fa-list-ol"></i></button>
<button class="btn btn-outline-secondary btn-sm w-auto" onclick="textFormat('insertUnorderedList', null)"><i class="fa fa-list-ul"></i></button>
|
<button class="btn btn-outline-secondary btn-sm w-auto" id="code"><i class="fa fa-code"></i></button>
</div>
</div>
<div class="row mt-1">
<div class="col">
<div id="editor" contenteditable="true"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
#editor {
border: 1px solid #ccc;
padding: 10px;
min-height: 400px;
white-space: normal; /* Cho phép xuống dòng */
}
console.clear();
const codeButton = document.getElementById('code');
const editor = document.getElementById('editor');
codeButton.addEventListener('click', () => {
alert(editor.innerHTML);
});
editor.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault(); // Ngăn chặn hành vi mặc định của phím Enter
const selection = window.getSelection();
const range = selection.getRangeAt(0);
const tag = document.createElement('br');
range.insertNode(tag);
range.collapse(false); // Đặt con trỏ vào cuối dòng
selection.removeAllRanges();
selection.addRange(range);
}
});
function textFormat(parameter, value) {
document.execCommand(parameter, false, value);
}