<!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">&lt;&#63;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 */