| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- <div id="editor">
- <h1>Hello <placeholder>name</placeholder>!</h1>
- <p>We would like to invite you to <placeholder>place</placeholder> that will take place on <placeholder>date</placeholder>.</p>
- </div>
- <h2>Model contents:</h2>
- <pre id="model"></pre>
- <style>
- placeholder {
- background: #ffff00;
- padding: 4px 2px;
- outline-offset: -2px;
- line-height: 1em;
- }
- placeholder::selection{
- display: none;
- }
- placeholder:before{
- content: '{'
- }
- placeholder:after{
- content: '}'
- }
- /* This will show box when the fake selection is active. */
- .ck.ck-content div[style*="left: -9999px;"]:before {
- background: hsla(9,100%,56%,.3);
- border: 1px dotted hsl(15, 100%, 43%);
- color: #333;
- content: 'fake selection set';
- display: block;
- height: 20px;
- left: calc(50% - 60px);
- line-height: 20px;
- padding: 2px 5px;
- position: fixed;
- top: 5px;
- z-index: 1;
- }
- </style>
|