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

我不知道这种编辑方式叫什么，但我以前在什么地方见过。假设你有一篇有标题、正文和页脚的文章。在您自己的所见即所得编辑器中，每个文章部分有三个按钮，或者可能有一个包含这些选项的下拉列表

将文章内容粘贴到编辑器中时，您希望依次使用按钮将内容划分为所需的部分。首先，单击要定义为标题的行。你点击线路的任何部分，都无所谓。现在，单击标题按钮，它将定义当前所在的行及其下方的任何内容作为标题。现在，单击要定义为主体的行，然后单击主体按钮。同样，线上下的一切都被定义为身体。您对页脚执行相同的操作

execCommand是否可以做到这一点？

开放源代码库负责处理contenteditable 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>

标题
页脚
Lorem ipsum dolor sit amet
$（文档）.ready（函数（）{
var editor=$（“#editor”）.wysiwyg（）；
$（“#标题”）。单击（函数（）{
编辑器.wysiwyg（“shell”）.bold（）.fontSize（30）；
});
$（“#页脚”）。单击（函数（）{
编辑器.wysiwyg（“shell”）.italic（）；
});
});

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

var editor=document.getElementById（'editor'）；
var output=document.getElementById（'output'）；
var format=document.getElementById（'format'）；
var handleCursorChange=函数（）{
//跟踪光标移动
}
editor.onclick=handleCursorChange；
editor.onkeydown=handleCursorChange；
editor.onfocus=handleCursorChange；
格式。addEventListener（“单击”，函数（e）{
如果（e.target.id==“标题”）{
//格式根据您的要求
}
如果（e.target.id==“body”）{
//格式根据您的要求
}
如果（e.target.id==“页脚”）{
//格式根据您的要求
}
});

文件
标题
身体
页脚
为了您自己的理智，最好使用一个流行的wysiwyg编辑器库，但如果您坚持自己使用，可以使用JavaScript实现。使用和确定光标位置，然后气泡上升到其父块。在编辑器下方的新
div
节点中包装该父节点

说明：单击其中一段，然后单击其中一个按钮。您将需要web浏览器的开发者工具栏来注意差异

它还远远不够完美；从上到下工作时效果最好。它不能处理复杂的嵌套场景；如果选择了嵌套在另一个段落中间的段落，则该段落可能不会一直捕捉到结尾


window.wrap=函数（节）{
var isBlock=函数（节点）{
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）；
如果（范围）{
对于（var节点=range.startContainer；
node&&node.parentNode&&node.parentNode！==编辑器&&
（！isBlock（node）| | node==node.parentNode.firstChild）；
node=node.parentNode）；
if（node&&node.parentNode&&isBlock（node））{
var wrapper=document.createElement（'div'）；
wrapper.className=节；
var parent=node.parentNode；
while（parent！==editor&&parent===parent.parentNode.lastChild）{
parent=parent.parentNode；//中断早期包装
} 
while（节点）{
var next=node.nextSibling；
appendChild（节点）；
节点=下一个；
}
parent.appendChild（包装器）；
}   
}
}

标题
身体
页脚
这是一篇示例文章

当然，您可以在此处复制/粘贴自己的内容

但为了您的方便，此内容将开箱即用

让这成为我们的页脚

您已经在使用某个编辑器了吗？或者它必须是文本区吗？你想用一些特殊的标题标记（textarea？）来包装当前行，还是把它复制到其他地方，比如说复制到某个变量？@entio我已经看过很多基于网络的所见即所得编辑器，比如CKEditor，但它们都过于“臃肿”。我的编辑器不需要太多功能，因此我想从头开始做一些事情，因此我在常规div上使用contenteditable。我专门使用了它。@entio至于我想具体做什么，比如说，当你将内容粘贴到可编辑区域时，我想将整个内容与类一起放在一个新的div下“undefined”。然后，当你点击一行并选择一个文章类时，比如body，光标所在的那行，之后的所有内容都应该有效地从这个未定义的div中取出，放入一个名为“bo”的新div中