JS / JQuery execCommand问题

时间:2011-03-16 13:56:01

标签: javascript jquery execcommand

我在使用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或什么?

非常感谢 - 提前感谢。 OH和我不想使用i-frame或textarea

1 个答案:

答案 0 :(得分:7)

我强烈建议您使用Rangy来处理文本选择。

  

跨浏览器的JavaScript范围和选择库。它提供了一个简单的基于标准的API,用于在所有主流浏览器中执行常见的DOM范围和选择任务,在Internet Explorer和符合DOM的浏览器之间抽象出这种功能的完全不同的实现。

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