keyboard.html 1000 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <head>
  2. <style>
  3. body {
  4. max-width: 800px;
  5. margin: 20px auto;
  6. }
  7. .ck-content .widget {
  8. background: rgba( 0, 0, 0, 0.1 );
  9. min-height: 50px;
  10. }
  11. .ck-content placeholder {
  12. background: #ffff00;
  13. padding: 4px 2px;
  14. outline-offset: -2px;
  15. line-height: 1em;
  16. /* Set margins before and after the inline widget so the cursor between two instances is visible when one of them is focused.
  17. Optimized for Firefox due to bug in rendering selection in ZWS on Chrome. See ckeditor5#1607. */
  18. margin-right: 1px;
  19. margin-left: 3px;
  20. }
  21. .ck-content placeholder::selection {
  22. display: none;
  23. }
  24. </style>
  25. </head>
  26. <h2>LTR content</h2>
  27. <div id="editor-ltr">
  28. <h2>Heading 1</h2>
  29. <p>Para<placeholder>inline widget</placeholder>graph</p>
  30. <div class="widget"></div>
  31. <p>Paragraph</p>
  32. </div>
  33. <h2>RTL content</h2>
  34. <div id="editor-rtl">
  35. <h2>مرحبا</h2>
  36. <p>مرحبا<placeholder>inline widget</placeholder>مرحبا</p>
  37. <div class="widget"></div>
  38. <p>مرحبا</p>
  39. </div>