extending-content-custom-element-converter.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <style>
  2. .info-box {
  3. border: 1px solid hsl(0, 0%, 80%);
  4. padding: 1em;
  5. background: hsl(0, 0%, 45%);
  6. }
  7. .info-box-warning {
  8. background: hsl(64, 74%, 85%);
  9. }
  10. .info-box-info {
  11. background: hsl(205, 100%, 90%);
  12. }
  13. .info-box-title {
  14. margin-bottom: 1em;
  15. font-weight: bold;
  16. color: inherit;
  17. }
  18. .info-box-content {
  19. padding: 0 1em;
  20. background: hsl(0, 0%, 100%);
  21. }
  22. </style>
  23. <div id="editor-custom-element-converter">
  24. <div class="info-box info-box-info">
  25. <div class="info-box-title">Info</div>
  26. <div class="info-box-content">
  27. <p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
  28. <ul>
  29. <li>UL List item 1</li>
  30. <li>UL List item 2</li>
  31. </ul>
  32. <ol>
  33. <li>OL List item 1</li>
  34. <li>OL List item 2</li>
  35. </ol>
  36. </div>
  37. </div>
  38. <p>Paragraph</p>
  39. <blockquote>
  40. <p>Quote</p>
  41. <ul>
  42. <li>Quoted UL List item 1</li>
  43. <li>Quoted UL List item 2</li>
  44. </ul>
  45. <p>Quote</p>
  46. </blockquote>
  47. <div class="info-box info-box-warning">
  48. <div class="info-box-title">Warning</div>
  49. <div class="info-box-content">
  50. <p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
  51. <ul>
  52. <li>UL List item 1</li>
  53. <li>UL List item 2</li>
  54. </ul>
  55. <ol>
  56. <li>OL List item 1</li>
  57. <li>OL List item 2</li>
  58. </ol>
  59. </div>
  60. </div>
  61. </div>