如何使用此代码使用文本格式而不是可编辑的 div

Question

编辑： 由于评论中的一些帮助，我能够使下面的代码正常工作，但它对所有内容都起作用，而不是突出显示的文本。

$(".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>

是否可以将此 div 改成文本框？它目前运行良好，但在提交表单时无法满足我的需求。如何让它发挥作用？

$(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>

Answer 1

谢谢你的帮助，但我实际上遇到了一个关于如何解决这个问题的旧 post On this old BBcode page，代码在通过表单发送时保留下来，结果显示 html.如果您乱用代码，还可以添加一个 NextLine 按钮，非常有帮助。 P.S.: 这个 javascript 在 header 中。

function formatText(el,tag){
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
if(document.selection){//IE
document.selection.createRange().text=newText;
}
else{//Moz
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
}
}

<form name="myForm">
<textarea name="myTextarea" rows = "12" cols = "50">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea><br>
<input type="button" value="Bold" onclick="formatText (myTextarea,'b');" />
<input type="button" value="Italic" onclick="formatText (myTextarea,'i');" />
<input type="button" value="Underline" onclick="formatText (myTextarea,'u');" />
</form>

如何使用此代码使用文本格式而不是可编辑的 div

How to use a textform instead of editable div with this code

html

javascript

css

textarea