protocol.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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>The default configuration for the link protocol has been set to <code id="default-protocol"></code>.</h2>
  33. <h3>...but you can change it:</h3>
  34. <form id="protocol-settings" style="margin: 20px 0;">
  35. <label for="http"><input type="radio" name="option" id="http" value="http://" />HTTP</label>
  36. <label for="https"><input type="radio" name="option" id="https" value="https://" />HTTPS</label>
  37. <label for="mailto"><input type="radio" name="option" id="mailto" value="mailto:" />MAILTO</label>
  38. <label for="file"><input type="radio" name="option" id="file" value="file://" />FILE</label>
  39. </form>
  40. <div id="editor">
  41. <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>
  42. </div>
  43. <p><sup>[1]</sup> Copy the email address and create a link with it (<code>mailto:</code> protocol will be added automatically).</p>