AdminPi, 前端, 2021-04-12 18:10:00
临时改下代码,这种需求对于程序员群体来说,再平常不过了!
手头刚好没有IDE怎么办?
用记事本吧,经常出现编码问题;下载一个吧,又太费事!
难道就没有更好的选择?
当然有,找一个WebIDE;但是注册账号又太麻烦!
作为程序员的我们,为什么不自己打造一款呢?
说干就干!
今天我们主要介绍一款基于浏览器的代码编辑器框架:
Ace (Ajax.org Cloud9 Editor)
她支持超过120种语言的语法高亮显示,并且主题个数超过20个,囊括了大部分IDE的配色方案;对于临时改改代码这种需求来说,已经完全足够。
把Ace嵌入到自己的网页,也非常的简单:
<div id="editor">
<?php
echo 'Hello World!';
?>
</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
</script>
注意:必须设置div的宽和高,并且position需要设置成absolute或者relative,才能生效。
#editor {
position: absolute;
width: 500px;
height: 500px;
}
配置编辑器的主题:
editor.setTheme("ace/theme/gruvbox");
配置编辑器以支持PHP语言:
editor.session.setMode("ace/mode/php");
各种配置参数请参考官方Wiki:
https://github.com/ajaxorg/ace/wiki/Configuring-Ace
下面贴一个完整的示例代码:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ace-WebIDE</title>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor {
position: absolute;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<pre id="editor">
<?php
echo 'Hello World!';
?>
</pre>
<script src="https://cdn.staticfile.org/ace/1.4.9/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/gruvbox");
editor.session.setMode("ace/mode/php");
editor.setOptions({
showPrintMargin : false,
fontSize : '1rem'
});
</script>
</body>
</html>
© 2024