NPM安装

Question

我一直在我的项目中使用codemirror textarea。在此，搜索和替换demo我可以获得搜索和替换的功能。但我需要this对话框。我尝试了很多但是无法达到预期的效果。

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);}; }

这就是我的尝试。

非常感谢任何帮助。

Answer 1

回答这个问题可能有点迟，但我发现这个有用：

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

Answer 2

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

NPM安装

新插件名为codemirror-revisedsearch，您可以使用npm安装它，如下所示：

npm install --save codemirror-revisedsearch

手动安装

如果您不想使用npm，可以从https://github.com/maloric/codemirror-revisedsearch下载源代码。您还需要从https://github.com/maloric/codemirror-advanceddialog下载codemirror-advanceddialog插件。

Answer 3

在窗口中存储编辑器实例

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来显示搜索框

在codeflexy.com此处查看演示

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

3 个答案:

NPM安装

手动安装