如何包装在p标签中输入的文本？

Question

我有一个简单的contenteditable div作为编辑器，还有几个按钮，允许用户通过突出显示它并单击按钮来更改输入文本的颜色。

以下是链接到按钮的其中一个功能的示例：

        function yellow(){
    {       
        var selection = window.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        span.style.color = "yellow";
        span.appendChild(selectedText);
        selection.insertNode(span);
    }
    }

截至目前，问题在于，由于我正在使用window.getSelection()，因此页面上突出显示的任何内容都可以显示为彩色。我现在正在努力使它只有我的编辑器中的文本可以着色。我在想：

如何改进代码，以便输入到我的编辑器中的任何文本自动包装在p标签中？我以为我可以做这样的事情：

function yellow(){
    {       
        var selection = window.getSelection().getRangeAt(0);
        if(window.getSelection().baseNode.parentNode.tagName != "p") return;
        var selectedText = selection.extractContents();
        p.style.color = "yellow";
        p.appendChild(selectedText);
        selection.insertNode(p);
    }
    }