ExpressTest.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <!--jquery-->
  7. <script src="./extra/jquery/jquery.min.js"></script>
  8. <script src="./monaco-editor/min/vs/loader.min.js"></script>
  9. <script>
  10. $(function () {
  11. //引入monaco编辑器
  12. require.config({ paths: { vs: 'monaco-editor/min/vs' } });
  13. require(['vs/editor/editor.main'], function () {
  14. //初始化资源树
  15. var editor = monaco.editor.create(document.getElementById("editor"), {
  16. language: "javascript"
  17. });
  18. //const yourArray = ["名称", "青霉素注射剂", "苄星青霉素注射剂"];
  19. // 注册自定义的智能提示
  20. monaco.languages.registerCompletionItemProvider('javascript', {
  21. provideCompletionItems: function () {
  22. // 根据你的数组,创建提示
  23. const suggestions = yourArray.map(word => ({
  24. label: word,
  25. kind: monaco.languages.CompletionItemKind.Text,
  26. insertText: word
  27. }));
  28. return { suggestions };
  29. },
  30. });
  31. // 你的数组,包含词语和对应的拼音简码
  32. const yourArray = [
  33. { word: '词语1', pinyin: 'CY1' },
  34. { word: '词语2', pinyin: 'CY2' },
  35. { word: '词语3', pinyin: 'CY3' },
  36. ];
  37. // 注册自定义的智能提示
  38. monaco.languages.registerCompletionItemProvider('javascript', {
  39. provideCompletionItems: function (model, position) {
  40. // 获取光标悬停所在行的所有内容
  41. const lineword = model.getLineContent(position.lineNumber);
  42. // 获取光标悬停的单词
  43. const word = model.getWordAtPosition(position)?.word;
  44. // 根据你的需求,返回你的自定义提示
  45. const suggestions = yourArray.flatMap(item => {
  46. debugger;
  47. if (word === item.word.substring(0, word.length) || word === item.pinyin.substring(0, word.length)) {
  48. return [
  49. {
  50. label: item.word,
  51. kind: monaco.languages.CompletionItemKind.Text,
  52. insertText: item.word
  53. }
  54. ];
  55. } else {
  56. return [];
  57. }
  58. });
  59. return { suggestions };
  60. },
  61. });
  62. });
  63. });
  64. </script>
  65. </head>
  66. <body>
  67. <div id="editor" style="width:100%;height:100vh;">
  68. </div>
  69. </body>
  70. </html>