在可编辑的div中切换选定文本的粗体

Question

我正在为我的学校网站写一个网页编辑器，一切都很顺利，但我遇到了一个问题，删除字体样式从选定的文本。我可以选择文本，然后让jquery将span标记应用到它，并关联一个css类，当我想从所选文本中删除该类时，我的问题就来了。这是我目前所掌握的...

<div class="text" contenteditable="true">
Editable Content
</div>

我有一个事件监听器，它拾取粗体按钮按下并触发下面的函数...

function makeBold() {
var range = window.getSelection().getRangeAt(0);
alert(range.anchorNode.parentNode.nodevalue);
var newNode = document.createElement('span');
newNode.className = "bold-text";
range.surroundContents(newNode);
}

这个函数很好的应用样式，但我不知道我将如何删除它与切换。我正在努力理解如何使用范围选择来删除父标记。我正在尝试使用.closest()选择器，但一直得到对象或未定义的错误？谁能告诉我我是否走对了？

谢谢

戴夫

编辑：

im不使用像#myid或.classname这样的典型选择器，我需要将样式应用于用户选择的文本，因此im使用上面函数的span标记包装它。理想情况下，我需要找到一种方法，找到应用了.bold-text类的最接近的父节点，并将其删除。

Answer 1

使用jQuery的'remove class'方法删除给要格式化的文本的类。每次切换时，AddClass和RemoveClass

http://api.jquery.com/removeClass/

像这样做

单击一次-$('#id').addClass('class_of_text')；

单击两下-$('.class_of_text').removeClass('.class_of_text)；

单击“三”-$('#id').addClass('class_of_text')；

等等...