Question

我有一段代码将文档设置为designMode，然后使用document.execCommand（）函数对所选文本进行操作。

它提供了各种功能 - 例如，它允许用户将选定的文本行转换为粗体或斜体（基本上是文本编辑器的功能，就像我现在正在输入的那样）。

以下是代码的简化示例：

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
</head>
<body>
    <div>
          This is some text - highlight a section of it and press h1 then li
    </div>
    <button onclick="setToHeader()" id="h1" style="width:100px" unselectable="on">h1</button>
    <button onclick="setToList()" id="li" style="width:100px" unselectable="on">li</button>

    <script>
          document.designMode = 'on';
            function setToHeader() {
                  document.execCommand('formatBlock', false, 'h1');
            }
            function setToList() {
                    document.execCommand('insertUnorderedList', false, null);
            }
    </script>
</body>
</html>

我的问题是我不希望能够使用li按钮 - 即将所选文本转换为列表格式，当它已经使用h1按钮转换为标题格式时。

我想我希望能够阅读所选文本，只需使用以下内容进行检查：

// var selectedText = ???
var isHeading = selectedText.search('h1') > -1

这是方法，还是有更好的方法？

如何获取相关的选定文本并将其分配给变量？

Answer 1

你需要多一点努力。还需要使用jquery，请查看：

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
</head>
<body>
    <div>This is some text - highlight a section of it and press h1 then li </div>
    <div>This is some other text - highlight a section of it and press h1 then li </div>
    <button onclick="setToHeader()" id="h1" style="width:100px" unselectable="on">h1</button>
    <button onclick="setToList()" id="li" style="width:100px" unselectable="on">li</button>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>

          document.designMode = 'on';


          setInterval(function () {
                 var el = getSelectionContainerElement();
                    if($(el).is('h1')){  
                        $("#li").attr("disabled", true);
                    }
                    else
                    {
                        $("#li").attr("disabled", false);
                    }
                  }, 100);


            function setToHeader() {                    
                document.execCommand('formatBlock', false, 'h1');                 

            }
            function setToList() {                              
                document.execCommand('insertUnorderedList', false, null);           

            }

            function getSelectionContainerElement() {
                    var range, sel, container;
                    if (document.selection && document.selection.createRange) {
                        // IE case
                        range = document.selection.createRange();
                        return range.parentElement();
                    } else if (window.getSelection) {
                        sel = window.getSelection();
                        if (sel.getRangeAt) {
                            if (sel.rangeCount > 0) {
                                range = sel.getRangeAt(0);
                            }
                        } else {
                            // Old WebKit selection object has no getRangeAt, so
                            // create a range from other selection properties
                            range = document.createRange();
                            range.setStart(sel.anchorNode, sel.anchorOffset);
                            range.setEnd(sel.focusNode, sel.focusOffset);

                            // Handle the case when the selection was selected backwards (from the end to the start in the document)
                            if (range.collapsed !== sel.isCollapsed) {
                                range.setStart(sel.focusNode, sel.focusOffset);
                                range.setEnd(sel.anchorNode, sel.anchorOffset);
                            }
                        }

                        if (range) {
                           container = range.commonAncestorContainer;

                           // Check if the container is a text node and return its parent if so
                           return container.nodeType === 3 ? container.parentNode : container;
                        }   
                    }
            }
    </script>
</body>
</html>

Answer 2

您可以使用选择对象获取所选文本。

e.g。在IE11中：

getSelection()

可以在此处找到完整的文档：

 https://msdn.microsoft.com/en-us/library/ms535869(v=vs.85).aspx

将所选文本分配给designMode

2 个答案: