使所选文本加粗/解开
当您单击按钮时，我将所选文本包装在span标签中。 如果我然后选择一个不同的文本并单击该按钮，该文本也会包含在标签中。 但是，当我选择一段已经包含在span标签中的文本时，我想删除这些标签以取消插入文本，而不是将这些标签包装在更多标签中。
HTML
Some random text. Bold JS
$('.embolden').click(function(){ var highlight = window.getSelection(); var span = '' + highlight + ''; var text = $('.textEditor').html(); $('.textEditor').html(text.replace(highlight, span)); });
JSFiddle演示
我可能对这个请求感到贪婪，但我选择的部分文本已经包含在span标签中，但不是全部，我想在选择开始时关闭原始标签，打开一个在此之后的新标签，然后在选择结束时关闭新标签并在此之后打开一个新标签。
当您可以使用内置function时，为什么要尝试手动加粗文本。 现代浏览器实现了execCommand函数，允许在文本上加粗，加下划线等。 你可以写：
$('.embolden').click(function(){ document.execCommand('bold'); });
选定的文本将变为粗体，如果它已经是粗体，则将删除文本样式。
可以在此处找到命令列表和一些小文档。 （更多关于浏览器支持的信息 ）。
$(document).ready(function() { $('#jBold').click(function() { document.execCommand('bold'); }); });
#fake_textarea { width: 100%; height: 200px; border: 1px solid red; } button { font-weigth: bold; }
Select some text and click the button to make it bold...
Or write your own text
此答案的复制函数： 获取所选文本的父元素
没有真正完善这个，我认为这只适用于精确的选择，但它让你知道如何解决这个问题。 click函数检查当前选择的父元素是否具有类’bold’，如果是，则它再次用原始选择替换该元素。
jQuery(function($) { $('.embolden').click(function(){ var highlight = window.getSelection(); var span = '' + highlight + ''; var text = $('.textEditor').html(); var parent = getSelectionParentElement(); if($(parent).hasClass('bold')) { $('.textEditor').html(text.replace(span, highlight)); } else { $('.textEditor').html(text.replace(highlight, span)); } }); }); function getSelectionParentElement() { var parentEl = null, sel; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount) { parentEl = sel.getRangeAt(0).commonAncestorContainer; if (parentEl.nodeType != 1) { parentEl = parentEl.parentNode; } } } else if ( (sel = document.selection) && sel.type != "Control") { parentEl = sel.createRange().parentElement(); } return parentEl; }
得到它，最后：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada quis lorem non consequat. Proin diam magna, molestie nec leo non, sodales eleifend nibh. Suspendisse a tellus facilisis, adipiscing dui vitae, rutrum mi. Curabitur aliquet lorem quis augue laoreet feugiat. Nulla at volutpat enim, et facilisis velit. Nulla feugiat quis augue nec sodales. Nulla nunc elit, viverra nec cursus non, gravida ac leo. Proin vehicula tincidunt euismod.
Suspendisse non consectetur arcu, ut ultricies nulla. Sed vel sem quis lacus faucibus interdum in sed quam. Nulla ullamcorper bibendum ornare. Proin placerat volutpat dignissim. Ut sit amet tellus enim. Nulla ut convallis quam. Morbi et sollicitudin nibh. Maecenas justo lectus, porta non felis eu, condimentum dictum nisi. Nulla eu nisi neque. Phasellus id sem congue, consequat lorem nec, tincidunt libero.
Integer eu elit eu massa placerat venenatis nec in elit. Ut ullamcorper nec mauris et volutpat. Phasellus ullamcorper tristique quam. In pellentesque nisl eget arcu fermentum ornare. Aenean nisl augue, mollis nec tristique a, dapibus quis urna. Vivamus volutpat ullamcorper lectus, et malesuada risus adipiscing nec. Ut nec ligula orci. Morbi sollicitudin nunc tempus, vestibulum arcu nec, feugiat velit. Aenean scelerisque, ligula sed molestie iaculis, massa risus ultrices nisl, et placerat augue libero vitae est. Pellentesque ornare adipiscing massa eleifend fermentum. In fringilla accumsan lectus sit amet aliquam.
您会注意到我将按钮扩展为具有一些data-属性。 它们应该是不言自明的。
这也将取消应用于当前目标元素内的所选文本的子部分（所有内容都按类名称）。
正如您所看到的，我正在使用一个由一组东西组成的类，因此这为您提供了更多function。
此代码通过textEditor的内容并删除所有span标记。 它应该做的伎俩。
jQuery(function($) { $('.embolden').click(function(){ $('.textEditor span').contents().unwrap(); var highlight = window.getSelection(); var span = '' + highlight + ''; var text = $('.textEditor').html(); $('.textEditor').html(text.replace(highlight, span)); }); });
像这样的东西应该做的伎俩：
var span = ''; jQuery(function($) { $('.embolden').click(function(){ var highlight = window.getSelection(); if(highlight != ""){ span = '' + highlight + ''; }else{ highlight = span; span = $('span.bold').html(); } var text = $('.textEditor').html(); $('.textEditor').html(text.replace(highlight, span)); }); });
现代浏览器使用execCommand函数，可以非常容易地增加文本。 它还提供其他样式，如下划线等。
Bold function emboldenFont() { document.execCommand('bold', false, null); }
如果您希望使用键盘加粗字符，可以使用以下（ Mac ）：
$(window).keydown(function(e) { if (e.keyCode >= 65 && e.keyCode <= 90) { var char = (e.metaKey ? '⌘-' : '') + String.fromCharCode(e.keyCode) if(char =='⌘-B') { document.execCommand('bold') } } })
使用键盘加粗字符：
检查这是你想要的???
运用
.toggleclass()
（使文本编辑器类中的所有文本仅为粗体）