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);
});

警报（BOLD点击）确实为我提供了突出显示的/选定的文本，但我无法确定如何“转动”粗体。我想我需要访问innerhtml或其他东西？

帮助非常感谢 - 预先感谢。哦，我不想使用i框架或textarea

Answer 1

I strongly recommend using Rangy for dealing with text selection.

A cross-browser JavaScript range and selection library. It provides a simple standards-based API for performing common DOM Range and Selection tasks in all major browsers, abstracting away the wildly different implementations of this functionality between Internet Explorer and DOM-compliant browsers.

You can use the CSS Class Applier Module to bold the text (live demo).