document.execCommand & contenteditable

2024-09-24 18:05:12

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;

}

最新文章

热门文章