网页代码编辑器的两个插件: ACE 和 CodeMirror

来源：互联网发布：新浪nba数据库网页编辑：程序博客网时间：2024/06/04 13:33

用ACE实现网页代码编辑器和代码高亮

一下链接是官网 http://ace.c9.io 提供的ace代码高亮库（不得不吐槽一下这个官网，只有这一个有效链接……）
https://github.com/ajaxorg/ace/tree/master/lib/ace
将 ace.js 导入页面中

<script src="/src-noconflict/ace.js"></script>

写html页面，<pre>中的javascript代码是我们想要高亮的内容。

<div class="container">            <pre class="marpad pre-scrollable" type="text" style="width:70%;height:300px;" id="editor" >            //Highlight Test            function IMActive(){                document.getElementById('IM').className='active';                document.getElementById('AM').className='';                document.getElementById('automative').hidden = "hidden";                document.getElementById('interactive').hidden = "";    }            function AMActive(){                document.getElementById('AM').className='active';                document.getElementById('IM').className='';                document.getElementById('automative').hidden = "";                document.getElementById('interactive').hidden = "hidden";    }            </pre></div>

下面是使用方法，用 ace.edit([name])可以用ace创建一个代码编辑器。可以对编辑器的功能、模板进行配置。

<script>"use strict";var editor = ace.edit("editor");            editor.setTheme("ace/theme/twilight");            editor.session.setMode("ace/mode/javascript")            editor.setOptions({                    enableBasicAutocompletion:true,                    enableSnippets:true                })</script>

最终效果是这样：
ace效果

用 CodeMirror 实现代码编辑器

CodeMirror 的官网是 http://codemirror.net/ 官网上有详细地manual
插件下载地址是 https://github.com/codemirror/codemirror

先导入js和css

<script src="lib/codemirror.js"></script><link rel="stylesheet" href="lib/codemirror.css"><script src="mode/javascript/javascript.js"></script>

同样使用上面那段html做测试
用CodeMirror.fromTextArea([textarea],.config object) 对<textarea>标签进行高亮
html代码：

<div class="container">            <textarea class="marpad " tyle="width:70%;height:300px;" id="editor" >                 //Highlight Test            function IMActive(){                document.getElementById('IM').className='active';                document.getElementById('AM').className='';                document.getElementById('automative').hidden = "hidden";                document.getElementById('interactive').hidden = "";    }            function AMActive(){                document.getElementById('AM').className='active';                document.getElementById('IM').className='';                document.getElementById('automative').hidden = "";                document.getElementById('interactive').hidden = "hidden";    }           </textarea>        </div>

用CodeMirror创建：

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), {                lineNumbers:true,                mode:  "javascript"            });

That’s it.
也许之后还会带来ace的自定义语法高亮js。

0 0