hint-userdefine.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6. <title>summernote</title>
  7. <!-- include jquery -->
  8. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  9. <!-- include libs stylesheets -->
  10. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" />
  11. <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.js"></script>
  12. <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.js"></script>
  13. <!-- include summernote -->
  14. <link rel="stylesheet" href="../dist/summernote-bs4.css">
  15. <script type="text/javascript" src="../dist/summernote-bs4.js"></script>
  16. <script src="https://www.google.com/jsapi" type="text/javascript"></script>
  17. <script type="text/javascript">
  18. $(function() {
  19. $('.summernote').summernote({
  20. height: 200,
  21. hint: {
  22. match: /#(\w{2,})$/,
  23. search: function(keyword, callback) {
  24. $.ajax({
  25. url: 'https://api.github.com/search/repositories?q=' + keyword + '&order=asc'
  26. }).then(function (data) {
  27. callback(data.items);
  28. });
  29. },
  30. content: function(item) {
  31. return '[' + item.full_name + '] ' + item.description;
  32. },
  33. template: function(item) {
  34. return '[<strong>' + item.full_name + '</strong>] ' + item.description;
  35. }
  36. }
  37. });
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. <textarea class="summernote">type #su</textarea>
  43. </body>
  44. </html>