在线代码编辑器

文章目录

目录

背景

二、使用步骤

1.引入库

2.使用

总结

---

背景

公司一个Web项目，需要java执行javascript的脚本，输入界面编辑器希望是能高亮显示代码的，方便查看代码。网上查找到ace.js可以实现在线代码显示的编辑器。

---

一、ace.js是什么？

        ace 是一个用 JavaScript 编写的独立代码编辑器。我们的目标是创建一个基于浏览器的编辑器，该编辑器匹配并扩展现有本机编辑器（如 TextMate，VIM 或 Eclipse）的功能，可用性和性能。它可以轻松嵌入任何网页或 JavaScript 应用程序中。Ace 是 Cloud9 IDE 的主要编辑者，也是 Mozilla Skywriter（Bespin）项目的继承者。

二、使用步骤

1.引入库

<script src="#(ctx)/static/mode-js/ace.min.js"></script> 
<script src="#(ctx)/static/mode-js/ext-beautify.min.js"></script> 
<script src="#(ctx)/static/mode-js/ext-language_tools.min.js"></script> 
<script src="#(ctx)/static/mode-js/mode-javascript.min.js"></script> 
<script src="#(ctx)/static/mode-js/theme-xcode.min.js"></script>

2.使用

代码如下（示例）：

<div class="form-group">
	<label class="col-sm-2 control-label">javascript脚本：</label>
	<div class="col-sm-10">
		<div id="editor" style="width:100%;height:400px"></div>
	</div>
</div>

        //初始化编辑器
		function initEditor()
		{
			var editor = ace.edit('editor');// 这个地方就是id是editor的div
			editor.setTheme('ace/theme/xcode');
			let jsMode = ace.require('ace/mode/javascript').Mode;
			let beautify = ace.require("ace/ext/beautify");
			editor.session.setMode(new jsMode());
			beautify.beautify(editor.getSession());
		}
		//获取编辑内容
		function getEditValue()
		{
			var editor=ace.edit('editor');
			return editor.getValue();
			//editor.setValue(jsonDoc);
		}
		//设置编辑器内容
		function setEditValue(doc)
		{
			var editor=ace.edit('editor');
			//console.log(editor.getValue());
			editor.setValue(doc);
		}
		//格式化编辑器代码
		function formatCode() {
			var editor=ace.edit('editor');
			var session = editor.getSession();
			session.setValue(js_beautify(session.getValue(), jsbOpts));
		}

效果如下图：

---

总结

github地址

我是从cdn中直接搜索下载的。

ace_demo: html、js实现在线JavaScript编辑器。