mention-custom-view.html 828 B

1234567891011121314151617181920212223242526272829303132
  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. <h2>Test cases:</h2>
  4. <ul>
  5. <li><strong>Same mention twice in data:</strong> <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></li>
  6. </ul>
  7. </div>
  8. <style>
  9. .mention {
  10. background: hsla(341, 100%, 87%, 0.4);
  11. color: hsl(340, 100%, 31%);
  12. }
  13. .custom-item {
  14. display: block;
  15. padding: 1em;
  16. }
  17. .custom-item.ck-on {
  18. color: white;
  19. }
  20. .custom-item .custom-item-username {
  21. color: #666;
  22. }
  23. .custom-item.ck-on .custom-item-username{
  24. color: #ddd;
  25. }
  26. </style>