Chrome 黑科技

秒变记事本


data:text/html, <htmlcontenteditable>

OK

<a href="data:text/html, " target="_blank>open new note

<a href="data:text/html, <html contenteditable>" target="_blank>open new note</a>


<html contenteditable="">
<head></head>
<body>
# markdown editor
<div><br></div>
<div><br></div>
<div><br></div>
</body>
</html>

contenteditable

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable

editable = element.contentEditable
element.contentEditable = 'true'

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable


<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://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content