JS / JQuery execCommand问题

Question

我在execCommand上遇到了麻烦(完整的)，所以你的帮助非常感谢-我毫不怀疑我找错了人，但是.....不管怎样，

我有一个像这样的div

<div class="editable" id="editor" contenteditable="true"> 
    <2>Some text in here</h2> blah blah blah ...
</div>

这是“可编辑的”，也就是document.designMode = 'on'; -它得到的是焦点上的这个“状态”。在模糊时将其更改为document.designMode = 'off';

我有一个“测试按钮”

<input type="button" id="bold" value="Bold"> 

当“点击”时会使“突出显示的文本”变得粗体--因此是execCommand

到目前为止，我有这样的东西：

function getSelected() {
if(window.getSelection) { return window.getSelection(); }
else if(document.getSelection) { return document.getSelection(); }
else {
var selection = document.selection && document.selection.createRange();
if(selection.text) { return selection.text; }
return false;
}
return false;
}


$('#bold').click(function(){
var selection = getSelected();
alert(selection);
});

警告(粗体单击)确实会给我提供突出显示/选中的文本，但我不知道如何将其变为粗体。我想我需要访问innerHTML或者别的什么？

非常感谢你的帮助--提前谢谢。哦，我既不想使用I帧，也不想使用文本区域

Answer 1

我强烈推荐使用Rangy来处理文本选择。

是一个跨浏览器的JavaScript范围和选择库。它提供了一个简单的、基于标准的API，用于在所有主流浏览器中执行常见的DOM范围和选择任务，从而消除了Internet Explorer和兼容DOM的浏览器之间对此功能的实现的巨大差异。

您可以使用CSS Class Applier Module加粗文本(live demo)。