提问者:小点点

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


我正在为我的学校网站写一个网页编辑器,一切都很顺利,但我遇到了一个问题,删除字体样式从选定的文本。我可以选择文本,然后让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类的最接近的父节点,并将其删除。


共1个答案

匿名用户

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

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

像这样做

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

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

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

等等...