mention-custom-view.html 776 B

1234567891011121314151617181920212223242526272829
  1. <div id="editor">
  2. <p>Have you met... <a class="mention" data-mention="Ted Mosby" href="https://www.imdb.com/title/tt0460649/characters/nm1102140">@Ted Mosby</a></p>
  3. <p>Same mention twice in data: <a class="mention" data-mention="Ted Mosby" href="https://www.imdb.com/title/tt0460649/characters/nm1102140">@Ted Mosby</a><a class="mention" data-mention="Ted Mosby" href="https://www.imdb.com/title/tt0460649/characters/nm1102140">@Ted Mosby</a></p>
  4. </div>
  5. <style>
  6. .mention {
  7. background: hsla(341, 100%, 87%, 0.4);
  8. color: hsl(340, 100%, 31%);
  9. }
  10. .custom-item {
  11. display: block;
  12. padding: 1em;
  13. }
  14. .custom-item.ck-on {
  15. color: white;
  16. }
  17. .custom-item .custom-item-username {
  18. color: #666;
  19. }
  20. .custom-item.ck-on .custom-item-username{
  21. color: #ddd;
  22. }
  23. </style>