document.execCommand & contenteditable

最新推荐文章于 2022-03-02 17:08:30 发布

weixin_30764771

最新推荐文章于 2022-03-02 17:08:30 发布

阅读量113

点赞数

原文链接：http://www.cnblogs.com/xgqfrms/p/10308392.html

版权

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;
}

转载于:https://www.cnblogs.com/xgqfrms/p/10308392.html