code highlighting apex (Firefox 31)

Question

The Oracle Application Express code editor is just plain back text on white background. No Code highlighting. Also I can't press "tab" without the textfield loosing focus.

I am using firefox 31 (can't upgrade, rescricted by Admin at work here) Also I can't install plugins. I know you can change css on specific sites using a special folder in firefox ("chrome"-folder / userContent.css). I already used this to change die default size of the textfield, because it was frickin small everytime I opened the edit page.

So do you know any framework or script I can use in Apex ? (I could copy that shit to jsfiddle.net every time but that sucks

(I also found the scratchpad in Firefox, which can run js and jquery. Does that help ?)

Answer 1

[SOLVED] since you can't use

    <script src = "">

etc. in plain js, I had to use loadScript. For css files it was even more complicated, but I got it all working.

This is my code, I run it in scratchpad (firefox). It uses ACE to change a div to an editor with highlighting. When clicking apply I revert the editor-changes in the DOM but keep the text/code.

    // Load Ace js
    loadScript("http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js", function(){
        //initialization code
    });
    // Load Ace css
    var cssId = 'myCss';  // you could encode the css path itself to generate id..
    if (!document.getElementById(cssId)){
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id   = cssId;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.href = 'http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css';
        link.media = 'all';
        head.appendChild(link);
    }
    // change textarea to div
    var editorRegion = document.getElementById('F4000_P4651_PLUG_SOURCE_fieldset');
    editorRegion.innerHTML = editorRegion.innerHTML.replace("textarea","div");

    // run ACE
    highlight();


    // Modify the apply Button in Apex to first revert ACE-Editor to normal, then do the usual apply.
    var applyChanges = document.getElementById('B3456326662');
    applyChanges.setAttribute("onclick","modifiedApply()");
    function modifiedApply(){
      close();
      setTimeout(normalApply, 500);
    }
    function normalApply(){
      javascript:apex.submit('Apply_Changes');
    }

    // Revert ACE-Changes, but keep changed text/code.
    function close(){
        var value = editor.getValue();
        editor.destroy();
        var oldDiv = editor.container;
        var newDiv = oldDiv.cloneNode(false);
        newDiv.textContent = value;
        oldDiv.parentNode.replaceChild(newDiv, oldDiv);
        newDiv.outerHTML = newDiv.outerHTML.replace("div","textarea");
        var old_new_old = document.getElementById('F4000_P4651_PLUG_SOURCE');
        old_new_old.textContent = old_new_old.textContent.substring(0, old_new_old.textContent.length - 6);
    }
    var editor;
    function highlight() {
      editor = ace.edit("F4000_P4651_PLUG_SOURCE");
      editor.setTheme("ace/theme/monokai");
      editor.getSession().setUseWorker(false);
      editor.getSession().setMode("ace/mode/javascript");
      document.getElementsByClassName('ace_print-margin')[0].setAttribute("style","left:1000px");
    }


    function loadScript(url, callback){
        var script = document.createElement("script")
        script.type = "text/javascript";

        if (script.readyState){  //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" ||
                        script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {  //Others
            script.onload = function(){
                callback();
            };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }