contextualballoon.html 967 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <div id="editor">
  2. <p>Line of text</p>
  3. <p>Line of text</p>
  4. <p>Line of text</p>
  5. <p>Line of text</p>
  6. <p>Line of text</p>
  7. <p>Line of text</p>
  8. <p>Line of text</p>
  9. <p>Line of text</p>
  10. <p>Line of text</p>
  11. <p>Line of text</p>
  12. <p>Line of text</p>
  13. <p>Line of text</p>
  14. <p>Line of text</p>
  15. <p>Line of text</p>
  16. <p>Line of text</p>
  17. <p>Line of text</p>
  18. <p>Line of text</p>
  19. </div>
  20. <style>
  21. .ck-editor {
  22. margin: 5em auto;
  23. max-width: 70%;
  24. }
  25. .plugin {
  26. text-align: center;
  27. display: flex;
  28. align-items: center;
  29. justify-content: center;
  30. padding: 10px;
  31. }
  32. .PluginA {
  33. padding: 1em;
  34. }
  35. .PluginB {
  36. padding: 2em;
  37. }
  38. .PluginC {
  39. padding: 3em;
  40. }
  41. .plugin * {
  42. text-align: center;
  43. }
  44. .plugin h2 {
  45. font-weight: bold;
  46. font-size: 16px;
  47. }
  48. .plugin h3 {
  49. font-size: 14px;
  50. }
  51. .plugin .toolbar {
  52. border: solid 1px #e1e1e1;
  53. box-shadow: inset 0 0 5px rgba( 0, 0, 0, .3 );
  54. margin: 10px 5px;
  55. padding: 15px;
  56. border-radius: 5px;
  57. }
  58. </style>