document.execCommand & contenteditable

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/contenteditable

demo

click copy

https://codepen.io/webgeeker/pen/XOJaEP

<blockquote contenteditable="true">
    <p>Edit this content to add your own quote</p>
</blockquote><cite contenteditable="true">-- Write your own name here</cite>

.output {
    font: 1rem 'Fira Sans', sans-serif;
}blockquote {
    background: #eee;
    border-radius: 5px;
    margin: 16px 0;
}blockquote p {
    padding: 15px;
}cite {
    margin: 16px 32px;
}blockquote p::before {
    content: '\201C';
}blockquote p::after {
    content: '\201D';
}[contenteditable='true'] {
    caret-color: red;
}