<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor"><?php
// use snippets with tab triggered keywords
// usage: press tab after the keyword
// note: snippets can have multiple fields, use tab to go to next field
cls
pubfunc
privfunc
getPlayer
// oh! try ctrl+space after a these or just try stuff (Hint: php)
e
getPl
cl
arra
</div>
<script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
var editor = ace.edit('editor');
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode('ace/mode/php');
editor.session.setUseWrapMode(true);
editor.session.setWrapLimitRange(null, null);
editor.setBehavioursEnabled(true);
editor.setShowPrintMargin(false);
editor.session.setUseSoftTabs(true);
editor.session.on('change', function (e) {
EditorChanged();
});
function EditorChanged() {
}
ace.config.loadModule('ace/ext/language_tools', function () {
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true
})
var snippetManager = ace.require("ace/snippets").snippetManager;
var config = ace.require("ace/config");
ace.config.loadModule("ace/snippets/php", function(m) {
if (m) {
snippetManager.files.php = m;
m.snippets = snippetManager.parseSnippetFile(m.snippetText);
m.snippets.push({
content: "class ${1:Example}{\n\t${2:// Class}\n}",
name: "new class",
tabTrigger: "cls"
});
m.snippets.push({
content: "public function ${1:world}(){\n\t${2:// Function}\n}",
name: "public function",
tabTrigger: "pubfunc"
});
m.snippets.push({
content: "private function ${1:world}(){\n\t${2:// Function}\n}",
name: "private function",
tabTrigger: "privfunc"
});
m.snippets.push({
content: "\\$player = \\$${1:event}->getPlayer();\n",
name: "getPlayer",
tabTrigger: "getPlayer"
});
snippetManager.register(m.snippets, m.scope);
}
});
});
</script>
</body>
</html>
// Code goes here
/* Styles go here */