UPDATE: I managed to successfully implement the code below with some assistance from the comments. However, it seems to apply the changes to all text rather than just the highlighted text.
$(".boldtrigger").click(function() {$(".text").toggleClass("bold");});
$(".italictrigger").click(function() {$(".text").toggleClass("italic");});
$(".underlinetrigger").click(function() {$(".text").toggleClass("underline");});.bold { font-weight: bold;}
.italic {font-style: italic;}
.underline {text-decoration: underline;}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
</head>
<body>
<a href="#" class="boldtrigger">Bold</a> <a href="#" class="italictrigger">italic</a> <a href="#" class="underlinetrigger">underline</a>
<textarea class="text">Here is the text.</textarea>
</body>
</html>Is there a way to convert this div into a textarea box instead? Although it functions correctly at present, it does not meet my requirements when submitting a form. How can this be achieved?
$(document).ready(function() {$('#jBold').click(function() {document.execCommand('bold');}).find('#fake_textarea').removeAttr('disabled').trigger('focus');});
$(document).ready(function() {$('#jUnderline').click(function() {document.execCommand('underline');}).find('#fake_textarea').removeAttr('disabled').trigger('focus');});
$(document).ready(function() {$('#jNewline').click(function() {document.execCommand('insertHtml', false, '<br>');}).find('#fake_textarea').removeAttr('disabled').trigger('focus');}) #fake_textarea {
width: 100%;
border: 1px solid red;
height: auto;
min-height: 200px;
}
button {
font-weigth: bold;
}
span {display: table;}<!DOCTYPE html>
<html>
<head>
<script src="http://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="jBold" type="button"><b>B</b></button> <button id="jUnderline" type="button"><u>U</u></button> <button id="jNewline" type="button">New Line</button>
<div id='fake_textarea' contenteditable='true'></div>
</body>
</html>