How to create search and replace dialog box in codemirror?

问题:

I have been using codemirror textarea in my project. In this, search and replace demo I can get the feature of search and replace. But I need like this dialogue box. I tried a lot but am unable to get as I expect.

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

This is what I have tried.

Any help will be greatly appreciated.

回答1:

Maybe a little late to answer this question, but I've found this to work:

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

回答2:

Obviously this question is fairly old now, but in case anyone else stumbles across it looking for an answer, I have written a replacement search addon for CodeMirror that looks and acts more like a traditional find/replace dialog. The built in search is made that way for compatibility reasons - without the dialog addon it will fall back to the browser's alert and confirm implementations. My addon does not do that, and uses a slightly modified dialog addon to the original.

NPM Installation

The new addon is called codemirror-revisedsearch, and you can install it using npm like so:

npm install --save codemirror-revisedsearch

Manual Installation

If you don't want to use npm, you can download the source from https://github.com/maloric/codemirror-revisedsearch. You will also need to download the codemirror-advanceddialog addon from https://github.com/maloric/codemirror-advanceddialog.

转载请标明出处:How to create search and replace dialog box in codemirror?

文章来源: How to create search and replace dialog box in codemirror?