将所选文本分配给 designMode 中的变量

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

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

例如在 IE11 中：

getSelection()

可在此处找到完整文档：

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

将所选文本分配给 designMode 中的变量

assign selected text to a variable in designMode

javascript

wysiwyg

designmode