编辑:由于评论中的一些帮助，我能够使下面的代码正常工作，但它对所有内容都起作用，而不是突出显示的文本。
$(".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>最佳答案
谢谢你的帮助，但我实际上遇到了一个旧帖子 On this old BBcode page关于如何解决这个问题，代码在通过表单发送时保留下来，结果显示 html。如果您弄乱了代码，您还可以添加一个 NextLine 按钮，这非常有帮助。 P.S.:javascript 位于此标题中。
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>关于javascript - 如何使用此代码使用文本形式而不是可编辑的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55134674/