richeditor.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <div id="test-controls">
  2. Call <code>editor.setData()</code> with:
  3. <span id="fixture-buttons"></span>
  4. HTML payload.
  5. <br><br>
  6. Cases marked with "(semantic)" contain elements known by the editor. Cases with "(styled)" focuses on styling using the <code>[style]</code> attribute.
  7. </div>
  8. <hr>
  9. <div id="word-count-wrapper" style="display:none">
  10. Words: <span id="word-count"></span> Characters: <span id="character-count"></span>
  11. </div>
  12. <div id="editor">
  13. <h1>Rich editor (h1)</h1>
  14. <p>
  15. This editor features exceptionally high number of plugins.
  16. </p>
  17. <p>
  18. It
  19. <strong>features</strong>
  20. <em>some basic</em>
  21. <s>font</s>
  22. <sub>styling &mdash;</sub>
  23. <sup>nothing</sup>
  24. <u>too crazy</u>.
  25. <a href="https://ckeditor.com">Links</a> are also here.
  26. </p>
  27. <p>
  28. Font can have customized
  29. <span style="background-color:#e6e64c">background</span>,
  30. <span style="color:#ff0000">foreground</span>,
  31. <span style="font-family:'Trebuchet MS', Helvetica, sans-serif">font face</span>,
  32. <span class="text-big">height</span>.
  33. You can also <mark class="marker-yellow">mark</mark> it or use <code>code</code> if you want to.
  34. </p>
  35. <p style="text-align:right">
  36. Text alignment can be customized.
  37. </p>
  38. <ol>
  39. <li>Ordered list
  40. <ol>
  41. <li>Ordered list</li>
  42. </ol>
  43. </li>
  44. </ol>
  45. <ul>
  46. <li>Unordered list
  47. <ul>
  48. <li>Unordered list</li>
  49. </ul>
  50. </li>
  51. </ul>
  52. <ul>
  53. <li><input type="checkbox">To-do list item 1</li>
  54. <li><input type="checkbox" checked="checked">To-do list item 2</li>
  55. <li><input type="checkbox">To-do list item 3</li>
  56. </ul>
  57. <p style="margin-left:40px">Indenting a paragraph is fine too.</p>
  58. <blockquote>
  59. An example blockquote text.
  60. </blockquote>
  61. <figure>
  62. <table style="border: 1px solid green;background:#fdfd77;width:200px;height:140px">
  63. <thead>
  64. <tr>
  65. <td><p>header</p></td>
  66. <td style="border:2px dashed black;background-color: lightblue"><p>styled header</p></td>
  67. </tr>
  68. </thead>
  69. <tbody>
  70. <tr>
  71. <td style="border:2px dashed black;background-color: lightblue"><p>styled cell</p></td>
  72. <td><p>cell</p></td>
  73. </tr>
  74. </tbody>
  75. </table>
  76. </figure>
  77. <figure class="media">
  78. <oembed url="https://www.youtube.com/watch?v=CB70skVw3nU"></oembed>
  79. </figure>
  80. <pre><code class="language-xml">&lt;blockquote&gt;
  81. An example blockquote text.
  82. &lt;/blockquote&gt;</code></pre>
  83. <p>Time to separate it with a horizontal rule, followed by a page break:</p>
  84. <hr>
  85. <div class="page-break" style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>
  86. <p>There is a possibility to work with the restricted editing plugin: <span class="restricted-editing-exception">Like that</span>.</p>
  87. </div>