1

我正在设置使用 JavaScript 进行一些简单的所见即所得编辑，但我在 Firefox 中遇到了我在 Chrome 或 IE（所有最新版本）中没有遇到的问题。当我的跨度中的所有文本都contentEditable被选中时，如果我尝试使用 使其变为粗体document.execCommand('bold',false,null)，我会收到一条相当不起眼的错误消息：“NS_ERROR_FAILURE：失败”

这是一些简单的示例代码，可以轻松重现该问题：

<html>
    <head>
        <script>
            function start(){

                var edit = document.getElementById('edit');
                edit.contentEditable = true;

                var button = document.getElementById('button');
                button.onclick = function(){

                    // Get the editable span
                    var edit = document.getElementById('edit');

                    // Select the contents of the span
                    var range = document.createRange();
                    range.selectNodeContents(edit);
                    var selection = window.getSelection();
                    selection.removeAllRanges();
                    selection.addRange(range);

                    // Make the text bold
                    document.execCommand('bold',false,null);

                }

            }
        </script>
    </head>
    <body onload="start();">
        <span id='edit'>Click on the button</span>
        <button id='button'>Bold It All!</button>
    </body>
</html>

那么，我在这里做错了什么？我刚刚遇到了一个错误吗？如果是这样，任何人都可以提出解决方案吗？

4

1 回答 1

2

这是一个错误。考虑归档它。简而言之：

  • 编辑器将尝试<span>用 a <b>（或另一个<span>when useCSS）包装 。
  • 这将删除<span>.
  • 因此，代码会检查父级<span>是否可编辑，但事实并非如此。
  • 繁荣！

解决方法：contenteditable="true"一个真正的块元素，如<div>.

于 2013-09-15T00:52:17.153 回答