javascript - execCommand:从当前行向下更改所有内容？

Question

不知道这种编辑怎么叫，以前好像在哪里见过。假设您有一篇带有标题、正文和页脚的文章。在您自己的所见即所得编辑器中，每个文章部分都有三个按钮，或者可能有一个包含这些选项的下拉菜单。

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

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

Answer 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 的自定义函数的 wysiwyg.js 解决方案中。 .