Javascript 如何在codemirror中创建搜索和替换对话框？

我一直在我的项目中使用codemirror textarea。在这里，搜索和替换我可以得到搜索和替换的功能。但我需要一个类似的对话框。我试了很多，但没有达到我的预期

codemirror.net/addon/search/search.js这是迄今为止我定制的js代码

var queryDialog = 'Search: <input type="text" style="width: 10em" class="CodeMirror-search-field"/> <span style="color: #888" class="CodeMirror-search-hint">(Use /re/ syntax for regexp search)</span><button onclick="findtest()">Find<button>'; 
function findtest(){ 
CodeMirror.commands.find = function(cm) {clearSearch(cm); doSearch(cm);}; } 

var queryDialog='Search:（使用/re/syntax进行regexp搜索）Find'；
函数findtest（）{
CodeMirror.commands.find=函数（cm）{clearSearch（cm）；doSearch（cm）；}；}

这就是我尝试过的

---

任何帮助都将不胜感激。

回答这个问题可能有点晚，但我发现这是可行的：

document.querySelector("#openSearch").onclick = function(){ editor.execCommand("find"); };

---

回答这个问题可能有点晚，但我发现这是可行的：

document.querySelector("#openSearch").onclick = function(){ editor.execCommand("find"); };

---

显然，这个问题现在已经很老了，但如果其他人在寻找答案时偶然发现，我已经为CodeMirror编写了一个替换搜索插件，它看起来和行为更像传统的查找/替换对话框。出于兼容性原因，内置搜索采用这种方式-如果没有对话框插件，它将返回到浏览器的警报和确认实现。我的插件没有做到这一点，而是使用了一个稍微修改过的对话框插件

NPM安装 新插件名为

codemirror ReviedSearch

，您可以使用npm安装它，如下所示：

npm install --save codemirror-revisedsearch

手动安装

---

如果您不想使用npm，可以从下载源代码。您还需要从下载codemirror advanceddialog插件。

显然，这个问题现在已经相当老了，但如果其他人在寻找答案时偶然发现，我已经为codemirror编写了一个替换搜索插件，它的外观和行为更像传统的查找/替换对话框。出于兼容性原因，内置搜索采用这种方式-如果没有对话框插件，它将返回到浏览器的警报和确认实现。我的插件没有做到这一点，而是使用了一个稍微修改过的对话框插件

NPM安装 新插件名为

codemirror ReviedSearch

，您可以使用npm安装它，如下所示：

npm install --save codemirror-revisedsearch

手动安装

---

如果您不想使用npm，可以从下载源代码。您还需要从下载codemirror advanceddialog插件。

在窗口中存储编辑器实例，如

window.editor = CodeMirror(document.getElementById('myEditorElement'), options);

然后，即使在onclick事件中，您也可以在任何地方使用它

<span onclick="window.editor.execCommand('findPrev')">↑</span>
<span onclick="window.editor.execCommand('findNext')">↓</span>
<span onclick="window.editor.execCommand('replace')">Replace</span>

↑
↓
代替

我用Codemirror构建了一个JSON查看器工具

使用Ctrl+F或Cmd+F显示搜索框

---

检查这里的演示

在窗口中存储编辑器实例

window.editor = CodeMirror(document.getElementById('myEditorElement'), options);

然后，即使在onclick事件中，您也可以在任何地方使用它

<span onclick="window.editor.execCommand('findPrev')">↑</span>
<span onclick="window.editor.execCommand('findNext')">↓</span>
<span onclick="window.editor.execCommand('replace')">Replace</span>

↑
↓
代替

我用Codemirror构建了一个JSON查看器工具

使用Ctrl+F或Cmd+F显示搜索框

---

查看此处的演示

1）您的期望是什么？2） 展示一些您尝试过的代码1）您的期望是什么？2） 展示一点您尝试过的代码谢谢！你能解释一下这个代码吗？这会创建一个弹出式搜索和修复对话框吗？Id的哪个元素是

#openSearch

？#openSearch是您希望用户单击以打开搜索对话框的元素的Id。它可以是任何元素。将尝试它并让您知道谢谢！你能解释一下这个代码吗？这会创建一个弹出式搜索和修复对话框吗？Id的哪个元素是

#openSearch

？#openSearch是您希望用户单击以打开搜索对话框的元素的Id。它可以是任何元素。我会尝试一下，让你知道你有一个演示来看看它是什么样子的吗？你有一个演示来看看它是什么样子的吗？