ExecCommand: change everything starting from the current line?

Question

I do not know what this type of editing is called, but I saw it somewhere earlier. Let's say you have an article with a headline, body, and footer. In your own WYSIWYG editor, you have three buttons for each section of the article or, possibly, a drop-down list with these parameters.

When you paste the contents of an article into an editor, you want to use the buttons one by one to divide the contents into sections. First you click on the line that you want to define as the title. You click on any part of the line does not matter. Now you press the title button, and it defines the line you are currently in, and everything below is the title. Now you click on the line that you want to define as the body, and press the body button. Again, everything on the line and below it is defined as a body. You do the same for the footer.

Is this possible with execCommand?

Answer 1

wysiwyg.js .. , . , , 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. wysiwyg.js , .

Answer 2

, , wysiwyg, , JavaScript. getSelection getRangeAt, , . div node .

: , . -, .

; , . ; , , .

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>  

Hide result

Answer 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>

Run codeHide result