richeditor.html 2.5 KB

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