8
0

protocol.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <style>
  2. code {
  3. background: hsl(0, 0%, 90%);
  4. }
  5. sup {
  6. position: relative;
  7. }
  8. .ck-editor__editable sup:after {
  9. content: '';
  10. display: inline-block;
  11. position: absolute;
  12. width: 14px;
  13. height: 14px;
  14. left: 1px;
  15. top: 1px;
  16. background: hsla(207, 87%, 55%, 0.5);
  17. border-radius: 50px;
  18. animation: pulse 2s linear infinite;
  19. }
  20. @keyframes pulse {
  21. 0% {
  22. transform: scale(1);
  23. }
  24. 50% {
  25. transform: scale(2);
  26. }
  27. 100% {
  28. transform: scale(1);
  29. }
  30. }
  31. </style>
  32. <h2><code>Feature is disabled</code></h2>
  33. <div id="editor0">
  34. <p>This is <a href="http://ckeditor.com">CKEditor5</a> from <a href="http://cksource.com">CKSource</a>. If you need more information please contact us at support@example.com.</p>
  35. </div>
  36. <h2><code>http://</code></h2>
  37. <div id="editor1">
  38. <p>This is <a href="http://ckeditor.com">CKEditor5</a> from <a href="http://cksource.com">CKSource</a>. If you need more information please contact us at support@example.com <sup class="indicator">[1]</sup>.</p>
  39. </div>
  40. <p><sup>[1]</sup><strong>When feature enabled:</strong> copy the email address and create a link with it (<code>mailto:</code> protocol will be added automatically).</p>
  41. <h2><code>https://</code></h2>
  42. <div id="editor2">
  43. <p>This is <a href="http://ckeditor.com">CKEditor5</a> from <a href="http://cksource.com">CKSource</a>. If you need more information please contact us at support@example.com.</p>
  44. </div>
  45. <h2><code>mailto:</code></h2>
  46. <div id="editor3">
  47. <p>This is <a href="http://ckeditor.com">CKEditor5</a> from <a href="http://cksource.com">CKSource</a>. If you need more information please contact us at support@example.com.</p>
  48. </div>