如何在 Ace 编辑器中启用搜索框？答案

【问题标题】：How can I enable the Search Box in an Ace Editor?如何在 Ace 编辑器中启用搜索框？
【发布时间】：2021-03-17 21:35:44
【问题描述】：

你好 stackOverflow 社区，这是我在这里的第一个问题，我想知道如何在 Ace 编辑器中启用搜索框。

我有一个项目 here 的当前演示。到目前为止，编辑器有 Emmet 和 Autocomplete。我需要的下一个功能是当用户在编辑器中按下 CTRL+F 时显示的搜索框。

这是我用来配置编辑器的代码：

let e = document.querySelector("#editor");
let editor = ace.edit(e);
let langTools = ace.require("ace/ext/language_tools");
let Emmet = require("ace/ext/emmet");
ace.config.set("basePath", "path");
ace.config.loadModule("ace/ext/searchbox", function(m) {m.Search(editor)});


editor.getSession().setMode("ace/mode/html");
editor.setOptions({
    minLines: 24,
    maxLines: 24,
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true,
    enableEmmet: true
});
editor.session.setUseWrapMode(true);
editor.session.on("change", function () {
    window.onbeforeunload = function () {
        return "Changes you made might not be saved";
    };
    var unloadListener = function () {
        return "Changes you made might not be saved";
    };
    window.addEventListener("beforeunload", unloadListener);
    editor.execCommand("find")
});

谁能帮我弄清楚要导入哪些脚本以及如何启用它？谢谢。

【问题讨论】：

ace.config.set("basePath", "path"); 可能是一个错误 ext-searchbox.js 文件位于您网站上的 /path/ext-searchbox.js

标签： javascript ace-editor

【解决方案1】：

它应该被构建到标准构建中。

editor.execCommand('find');

应该显示搜索框。你也可以使用

editor.searchBox.show();
editor.searchBox.hide();

手动显示（即实现您自己的键绑定）。 Ace 内置了键绑定，使用它们有优点（也有缺点，例如它们仅在您专注于编辑器时才有效）。如果你要实现你自己的，你应该禁用内部的“find”命令。

【讨论】：