我有一个< div />这是可以容忍的,并且可以包含几种类型的
HTML元素,例如< span />,< a />,< b />,< u />等等.
@H_403_2@现在,当我在我的目标中选择文本时,我希望有一个按钮来删除选择中的所有样式.
@H_403_2@例1：
@H_403_2@选择：
Hello <b>there</b>. I am <u>a selection</u>@H_403_2@会成为：
Hello there. I am a selection@H_403_2@例2： @H_403_2@选择：
<a href="#">I am a link</a>@H_403_2@会成为：
I am a link@H_403_2@你明白了…… @H_403_2@我找到了这个有用的功能https://stackoverflow.com/a/3997896/1503476,用自定义文本替换当前选择.但我无法先获取选择的内容,并在替换前删除标签.我怎样才能做到这一点？
解决方法
我这样做的方法是迭代选择内的节点并删除内联节点(可能单独留下< br>元素).这是一个例子,为方便起见使用我的
Rangy库.它适用于所有主流浏览器(包括IE 6),但不是很完美：例如,它不会拆分部分选定的格式元素,这意味着部分选择的格式元素被完全删除,而不仅仅是选定的部分.解决这个问题会更棘手.
@H_403_2@演示：http://jsfiddle.net/fQCZT/4/
@H_403_2@码：
var getComputedDisplay = (typeof window.getComputedStyle != "undefined") ?
function(el) {
return window.getComputedStyle(el,null).display;
} :
function(el) {
return el.currentStyle.display;
};
function replaceWithOwnChildren(el) {
var parent = el.parentNode;
while (el.hasChildNodes()) {
parent.insertBefore(el.firstChild,el);
}
parent.removeChild(el);
}
function removeSelectionFormatting() {
var sel = rangy.getSelection();
if (!sel.isCollapsed) {
for (var i = 0,range; i < sel.rangeCount; ++i) {
range = sel.getRangeAt(i);
// Split partially selected nodes
range.splitBoundaries();
// Get formatting elements. For this example,we'll count any
// element with display: inline,except <br>s.
var formattingEls = range.getNodes([1],function(el) {
return el.tagName != "BR" && getComputedDisplay(el) == "inline";
});
// Remove the formatting elements
for (var i = 0,el; el = formattingEls[i++]; ) {
replaceWithOwnChildren(el);
}
}
}
}
