mention-asynchronous.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <head>
  2. <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self' http://localhost:3000 https://cksource.com http://*.cke-cs.com; script-src 'self' https://cksource.com; img-src * data:; style-src 'self' 'unsafe-inline'; frame-src *" />
  3. </head>
  4. <div id="editor">
  5. <p>Hello <span class="mention" data-mention="@Ted">@Ted</span>.</p>
  6. <p>Hello <span class="mention" data-mention="@Ted">@Ted</span><span class="mention" data-mention="@Ted">@Ted</span>.</p>
  7. <figure class="image">
  8. <img src="sample.jpg" />
  9. <figcaption>CKEditor logo - caption</figcaption>
  10. </figure>
  11. </div>
  12. <style>
  13. .ck-mentions .custom.mention__item {
  14. display: flex;
  15. flex-direction: row;
  16. width: 220px;
  17. }
  18. .mention__item .mention__item__thumbnail {
  19. /* Prevent images re-draw */
  20. width: 48px;
  21. height: 48px;
  22. border-radius: 100%;
  23. border: 2px solid #fff;
  24. }
  25. .mention__item .mention__item__body {
  26. flex: 1;
  27. margin-left: 1em;
  28. display: flex;
  29. flex-direction: column;
  30. }
  31. .mention__item .mention__item__username {
  32. float: left;
  33. color: #666;
  34. }
  35. .mention__item.ck-on .mention__item__username {
  36. color: #ddd;
  37. }
  38. .mention__item.ck-on .mention__item__full-name {
  39. float: left;
  40. }
  41. </style>