mention-asynchronous.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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. <p>
  5. <label>Use cache: <input id="cache-control" type="checkbox"></label>
  6. </p>
  7. <div id="editor">
  8. <p>Hello @</p>
  9. <figure class="image">
  10. <img src="sample.jpg" />
  11. <figcaption>CKEditor logo - caption</figcaption>
  12. </figure>
  13. </div>
  14. <style>
  15. .ck-mentions .custom.mention__item {
  16. display: flex;
  17. flex-direction: row;
  18. width: 220px;
  19. }
  20. .mention__item .mention__item__thumbnail {
  21. /* Prevent images re-draw */
  22. width: 48px;
  23. height: 48px;
  24. border-radius: 100%;
  25. border: 2px solid #fff;
  26. }
  27. .mention__item .mention__item__body {
  28. flex: 1;
  29. margin-left: 1em;
  30. display: flex;
  31. flex-direction: column;
  32. }
  33. .mention__item .mention__item__username {
  34. float: left;
  35. color: #666;
  36. }
  37. .mention__item.ck-on .mention__item__username {
  38. color: #ddd;
  39. }
  40. .mention__item.ck-on .mention__item__full-name {
  41. float: left;
  42. }
  43. </style>