Codemirror search with CTRL+F keys - Javascript CodeMirror

Javascript examples for CodeMirror:Configuration

  1. HOME
  2. Javascript
  3. CodeMirror
  4. Configuration

Description

Codemirror search with CTRL+F keys

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from w  ww. java 2s. c  o  m
editor = CodeMirror.fromTextArea(document.getElementById("myTextarea"), {
    mode: "text/html",
    lineNumbers: true
});
document.querySelector("#myButton").onclick = function(){ editor.execCommand("find"); };
    });

      </script> 
   </head> 
   <body> 
      <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"> 
      <link rel="stylesheet" href="https://codemirror.net/addon/dialog/dialog.css"> 
      <link rel="stylesheet" href="https://codemirror.net/addon/search/matchesonscrollbar.css"> 
      <script src="https://codemirror.net/lib/codemirror.js"></script> 
      <script src="https://codemirror.net/mode/xml/xml.js"></script> 
      <script src="https://codemirror.net/addon/dialog/dialog.js"></script> 
      <script src="https://codemirror.net/addon/search/searchcursor.js"></script> 
      <script src="https://codemirror.net/addon/search/search.js"></script> 
      <script src="https://codemirror.net/addon/scroll/annotatescrollbar.js"></script> 
      <script src="https://codemirror.net/addon/search/matchesonscrollbar.js"></script> 
      <button id="myButton">open search dialog</button> 
      <textarea id="myTextarea">Hello World</textarea>  
   </body>
</html>

Related Tutorials