Question

我正在尝试使用MDN here

中描述的富文本编辑命令功能

此API似乎相当简单。选择一些文本，然后执行命令，然后用它包装内容。很酷的东西！

在Firefox（Aurora）中，这很有效：

document.execCommand('heading', false, 'H1');

然而，Chrome中的相同命令不会返回任何内容。这在Chrome中是否以相同的方式实现（或根本没有）？

谢谢！

Answer 1

我担心Chrome还不支持标题命令。您可以在Chrome中查看此页面以获取可用命令：http://tifftiff.de/contenteditable/compliance_test.html

您要查找的是 formatBlock 命令，如下所示：

document.execCommand('formatBlock', false, '<h1>');

Answer 2

有一种方法可以只修改所选文本。

borto = {
            tmpEl: document.createElement('div'),
            /* create element like in jquery with string <tag attribute1 attribute2 /> or <tag attribute1></tag> */
            htmlToDom: function(htmlEl){
                borto.tmpEl.innerHTML = htmlEl;
                return borto.tmpEl.children[0]
            },
            wrapSelection: function(htmlEl){
                var sel = window.getSelection();
                // In firefox we can select multiple area, so they are multiple range
                for(var i = sel.rangeCount;i--;){
                    var wrapper = borto.htmlToDom(htmlEl)
                    var range = sel.getRangeAt(i);
                    wrapper.appendChild(range.extractContents());
                    range.insertNode(wrapper);
                }
            }
        }

例如，将所选文本放在h1标记中：

borto.wrapSelection('<h1/>')

https://jsfiddle.net/31pncq01/例如标题h1，h2

Answer 3

你可以用三个动作来创造它，就像这样......

var S=window.getSelection();

document.execCommand('delete',false,'');

document.execCommand('insertHTML',false,'<h1>'+S+'</h1>');

Chrome中的document.execCommand（'heading'..'）

3 个答案: