restrictedediting.html 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <p>
  2. <button id="mode-standard">Switch to standard mode</button>
  3. <button id="mode-restricted">Switch to restricted mode</button>
  4. </p>
  5. <p id="current-mode"></p>
  6. <div id="editor">
  7. <h2>Heading 1</h2>
  8. <p>Paragraph <span class="ck-restricted-editing-exception">it is editable</span></p>
  9. <p><strong>Bold</strong> <i>Italic</i> <a href="foo">Link</a></p>
  10. <ul>
  11. <li>UL List item 1</li>
  12. <li>UL List item 2</li>
  13. </ul>
  14. <ol>
  15. <li>OL List item 1</li>
  16. <li>OL List item 2</li>
  17. </ol>
  18. <figure class="image image-style-side">
  19. <img alt="bar" src="sample.jpg">
  20. <figcaption>Caption</figcaption>
  21. </figure>
  22. <blockquote>
  23. <p>Quote</p>
  24. <ul>
  25. <li>Quoted UL List item 1</li>
  26. <li>Quoted UL List item 2</li>
  27. </ul>
  28. <p>Quote</p>
  29. </blockquote>
  30. </div>
  31. <style>
  32. .ck-restricted-editing-exception {
  33. background-color: #ffcd96;
  34. }
  35. #current-mode {
  36. /*text-align: center;*/
  37. padding: 1em 0;
  38. }
  39. .mode {
  40. color: #fff;
  41. padding: 0.5em;
  42. }
  43. .mode-standard {
  44. background: #4f4fff;
  45. }
  46. .mode-restricted {
  47. background: #a72727;
  48. }
  49. </style>