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

soat7uwm 于 2023-03-06 发布在 Java

关注(0)|答案(3)|浏览(411)

我一直在我的项目中使用codemirror textarea。在这个，搜索和替换demo我可以得到搜索和替换的功能。但我需要像this对话框。我尝试了很多，但无法得到我所期望的。
codemirror.net/addon/search/search.js This is the js code I have customised so far.

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

这就是我所尝试的。
任何帮助都将不胜感激。

JavaScript

来源：https://stackoverflow.com/questions/26230365/how-to-create-search-and-replace-dialog-box-in-codemirror

3条答案

按热度按时间

vom3gejh1#

也许回答这个问题有点晚了，但我发现这个方法很有效：

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

赞(0）回复(0）举报 2023-03-06

xesrikrc2#

显然，这个问题已经很老了，但是如果有人在寻找答案的时候碰到它，我已经为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插件。

赞(0）回复(0）举报 2023-03-06

wnavrhmk3#

在窗口中存储编辑器示例，类似于

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>

我已经建立了一个JSON查看器工具使用Codemirror。
使用Ctrl + F或Cmd + F显示搜索框
在此处查看演示codeflexy.com

赞(0）回复(0）举报 2023-03-06

我来回答

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

3条答案

NPM安装

手动安装

相关问题

热门标签

最新问答