| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <style>
- .info-box {
- border: 1px solid hsl(0, 0%, 80%);
- padding: 1em;
- background: hsl(0, 0%, 45%);
- }
- .info-box-warning {
- background: hsl(64, 74%, 85%);
- }
- .info-box-info {
- background: hsl(205, 100%, 90%);
- }
- .info-box-title {
- margin-bottom: 1em;
- font-weight: bold;
- color: inherit;
- }
- .info-box-content {
- padding: 0 1em;
- background: hsl(0, 0%, 100%);
- }
- </style>
- <div id="editor-custom-element-converter">
- <div class="info-box info-box-info">
- <div class="info-box-title">Info</div>
- <div class="info-box-content">
- <p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
- <ul>
- <li>UL List item 1</li>
- <li>UL List item 2</li>
- </ul>
- <ol>
- <li>OL List item 1</li>
- <li>OL List item 2</li>
- </ol>
- </div>
- </div>
- <p>Paragraph</p>
- <blockquote>
- <p>Quote</p>
- <ul>
- <li>Quoted UL List item 1</li>
- <li>Quoted UL List item 2</li>
- </ul>
- <p>Quote</p>
- </blockquote>
- <div class="info-box info-box-warning">
- <div class="info-box-title">Warning</div>
- <div class="info-box-content">
- <p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
- <ul>
- <li>UL List item 1</li>
- <li>UL List item 2</li>
- </ul>
- <ol>
- <li>OL List item 1</li>
- <li>OL List item 2</li>
- </ol>
- </div>
- </div>
- </div>
|