【Java应用】使用CodeMirror来实现一个WebIDE

项目中之前一直想做一个WebIDE，至少需要具备高亮，自动补全等功能。但因为很多都是前端的功夫，我前端一般，所以一直没做，最近看到一个CodeMirror的插件，正好符合我的需求，而且还有其他很多特性

特性

• Support for over 100 languages out of the box
• A powerful, composable language mode system
• Autocompletion (XML)
• Code folding
• Configurable keybindings
• Vim, Emacs, and Sublime Text bindings
• Search and replace interface
• Bracket and tag matching
• Support for split views
• Linter integration
• Mixing font sizes and styles
• Various themes
• Able to resize to fit content
• Inline and block widgets
• Programmable gutters
• Making ranges of text styled, read-only, or atomic
• Bi-directional text support
• Many other methods and addons...

使用

<textarea id="code" name="code">
Java代码。。。
</textarea>

<script>
    CodeMirror.fromTextArea(document.getElementById("code"), {
    	参数配置。。。
    });
</script>

下面说下配置

1. 行号,只需要简单一行

   lineNumbers: true
   

2. 语言，java

   mode: "text/x-java"
   

3. 主题

   <!--暗黑主题需要-->
   <link rel="stylesheet" href="theme/darcula.css">
   
   theme: "darcula"
   

4. 缩进

   indentUnit: 4
   

5. 全屏

   <!--全屏-->
   <script src="addon/display/fullscreen.js"></script>
   <link rel="stylesheet" href="addon/display/fullscreen.css">
       
   fullScreen:true
   

6. 括号匹配

   <!--括号匹配-->
   <script type="text/javascript" src="addon/edit/closebrackets.js"></script>
   <script type="text/javascript" src="addon/edit/closetag.js"></script>
   <script type="text/javascript" src="addon/edit/continuelist.js"></script>
   <script type="text/javascript" src="addon/edit/matchbrackets.js"></script>
   <script type="text/javascript" src="addon/edit/matchtags.js"></script>
   <script type="text/javascript" src="addon/edit/trailingspace.js"></script>
   
   matchBrackets: true, //括号匹配
   autoCloseBrackets: true
   

7. 代码折叠

   <!--折叠-->
   <script type="text/javascript" src="addon/fold/foldcode.js"></script>
   <script type="text/javascript" src="addon/fold/foldgutter.js"></script>
   <script type="text/javascript" src="addon/fold/brace-fold.js"></script>
   <script type="text/javascript" src="addon/fold/comment-fold.js"></script>
   <link rel="stylesheet" href="addon/fold/foldgutter.css">
       
   lineWrapping: true, //代码折叠
   foldGutter: true,
   gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
   

8. 搜索

   <!--搜索需要-->
   <script type="text/javascript" src="addon/search/searchcursor.js"></script>
   <script type="text/javascript" src="addon/search/search.js"></script>
   <script type="text/javascript" src="addon/scroll/annotatescrollbar.js"></script>
   <script type="text/javascript" src="addon/search/matchesonscrollbar.js"></script>
   <script type="text/javascript" src="addon/search/jump-to-line.js"></script>
   <link rel="stylesheet" href="addon/search/matchesonscrollbar.css">
   
   <!--美化搜索的框-->
   <script type="text/javascript" src="addon/dialog/dialog.js"></script>
   <link rel="stylesheet" href="addon/dialog/dialog.css">
       
   extraKeys:{
       "Alt-F": "findPersistent"
   }
   

9. 自动补全

   <!--自动补全-->
   <script type="text/javascript" src="addon/hint/show-hint.js"></script>
   <script type="text/javascript" src="addon/hint/javascript-hint.js"></script>
   <link rel="stylesheet" href="addon/hint/show-hint.css">
       
   extraKeys:{
       "Tab": "autocomplete"
   }
   

源码

github

参考

全功能java

全功能使用

自动补全自己设置关键词

自定义快捷键