execCommand：从当前行向下更改所有内容？答案

【问题标题】：execCommand: change everything from the current line down?execCommand：从当前行向下更改所有内容？
【发布时间】：2017-12-04 04:39:11
【问题描述】：

我不知道这种编辑是怎么称呼的，但我以前在某个地方见过。假设您有一篇带有标题、正文和页脚的文章。在您自己的所见即所得编辑器中，每个文章部分都有三个按钮，或者可能是带有这些选项的下拉菜单。

当您将文章的内容粘贴到编辑器中时，您希望一个接一个地使用按钮将内容分成您想要的部分。首先，单击要定义为标题的行。您单击该行的任何部分，没关系。现在您单击标题按钮，它将定义您当前所在的行，及其下方的任何内容，作为标题。现在单击要定义为主体的线，然后单击主体按钮。同样，行上的所有内容，及其下，都被定义为主体。您对页脚执行相同操作。

execCommand 可以实现类似的功能吗？

【问题讨论】：

您是否已经在使用某些编辑器？还是必须只是textarea？你想用一些特殊的标题标签（textarea？）包装当前行还是只是将它复制到其他地方，比如说某个变量？
@entio 我一直在研究许多基于 Web 的所见即所得编辑器，例如 CKEditor，但它们都过于“臃肿”。我的编辑器不需要太多功能，因此我想从头开始做一些事情，因此我在常规 div 上使用 contenteditable。我专门用了这个guide。
@entio 至于我想具体做什么，假设当您将内容粘贴到可编辑区域时，我希望将整个内容放在一个新的 div 下，类为“未定义”。然后，当您单击一行并选择其中一个文章类时，例如 body，光标所在的行以及之后的所有内容都应该有效地从那个未定义的 div 中取出，并进入一个名为“body”的新 div。跨度>
我仍然没有得到您希望“文本选择器”工作的特定方式。也许你可以提供例子？否则请尝试为我指明正确的方向，这就是我制作的小提琴：jsfiddle.net/entio/ux0c92xL/9 让我们以此为起点。
@entio 感谢您的帮助。我只是希望我没有被工作淹没，否则我会更快地回复你。

标签： javascript execcommand

【解决方案1】：

开源库wysiwyg.js 负责处理内容可编辑的 div 等繁重工作，并允许您创建适合您需求的前端。您只需要为您需要的功能编写代码，您就可以在其上添加您自己的 CSS 样式。我使用下面的 jQuery 版本的库编写了一些示例代码，但上面链接的文档中有大量信息和示例。如果您更容易使用它们，它们也确实有一个纯 JavaScript 变体。

<button id="header">Header</button>
<button id="footer">Footer</button>
<textarea id="editor">Lorem ipsum dolor sit amet</textarea>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://path/to/wysiwyg.min.js"></script>
<script src="http://path/to/wysiwyg-editor.min.js"></script>

<script>
$(document).ready(function () {
    var editor = $("#editor").wysiwyg();

    $("#header").click(function () {
        editor.wysiwyg("shell").bold().fontSize(30);
    });

    $("#footer").click(function () {
        editor.wysiwyg("shell").italic();
    });
});
</script>

如果你想让它比这更简单，Quill 是一个不错的选择。它仍然不像 CKEditor 那样“沉重”，并且具有优雅的界面。它还具有用于样式预设的内置功能，例如页眉和页脚。与 wysiwyg.js 不同，此功能也不需要您突出显示要格式化的行。不过，这可以通过类似于this 的自定义函数添加到所见即所得的解决方案中。

【讨论】：

这似乎是我正在寻找的。这不是完全我需要它的方式，但它似乎足够可定制，我可以自己添加该功能。谢谢！很高兴看到有人能及时领取赏金。

【解决方案2】：

为了您自己的理智，最好选择流行的所见即所得编辑器库之一，但如果您坚持自己滚动，可以在 JavaScript 中完成。使用getSelection 和getRangeAt 确定光标位置，然后冒泡到其父块。将该父级包装在编辑器下方的新 div 节点中。

说明：单击其中一个段落，然后单击其中一个按钮。您将需要 Web 浏览器的开发人员工具栏来发现差异。

它仍然远非完美；当你从上到下工作时效果最好。而且它无法处理复杂的嵌套场景；如果您选择嵌套在另一个段落中途的段落，它可能不会一直捕捉到结尾。

window.wrap = function(section) {
    var isBlock = function(node) {
        return node.nodeType == 1 &&
               window.getComputedStyle(node).display == 'block';
    };
    var editor = document.getElementById('editor');
    var sel = window.getSelection();
    var range = sel && sel.rangeCount > 0 && sel.getRangeAt(0);
    if (range) {
        for (var node = range.startContainer;
             node && node.parentNode && node.parentNode !== editor &&
             (!isBlock(node) || node === node.parentNode.firstChild);
             node = node.parentNode);
        if (node && node.parentNode && isBlock(node)) {
            var wrapper = document.createElement('div');
            wrapper.className = section;
            var parent = node.parentNode;
            while (parent !== editor && parent === parent.parentNode.lastChild) {
                parent = parent.parentNode;   // break out of earlier wrapper
            } 
            while (node) {
                var next = node.nextSibling;
                wrapper.appendChild(node);
                node = next;
            }
            parent.appendChild(wrapper);
        }   
    }
}

<div>        
<button type="button" onclick="wrap('heading');">heading</button>
<button type="button" onclick="wrap('body');">body</button>
<button type="button" onclick="wrap('footer');">footer</button>
</div>      
<div id="editor" contenteditable="true" style="border:thin black solid; padding:4px">
<p>This is a sample article.</p>
<p>Of course, you can copy/paste your own content here.</p>
<p>But for your convenience, this content will work out of the box.</p>
<p>Let this be our footer.</p>
</div>

【讨论】：

【解决方案3】：

var editor = document.getElementById('editor');
var output = document.getElementById('output');
var format = document.getElementById('format');

var handleCursorChange = function () {
    //track cursor movement
}

editor.onclick = handleCursorChange;
editor.onkeydown = handleCursorChange;
editor.onfocus = handleCursorChange;

format.addEventListener("click", function (e) {
    if(e.target.id === "heading"){
        
        //format based on your requirement
    }
    if(e.target.id === "body"){
        
        //format based on your requirement
    }
    if(e.target.id === "footer"){
        
        //format based on your requirement
    }
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <textarea name="editor" id="editor" cols="30" rows="10"></textarea>
  <div id="format">
    <button id="heading">heading</button>
    <button id="body">body</button>
    <button id="footer">footer</button>
  </div>
  <div id="output"></div>
</body>

</html>

【讨论】：