✔ Ace-Editor einbinden (lokal)

[Cappaja]

Hallo,

um Code innerhalb eines DIV-Tags für etwaige Sprachen formatiert und mit entprechendem Syntax-Highlighting anzuzeigen, möchte ich den ACE-Editor nutzen.
Unter folgendem Link ist auch eine relativ simple Anleitung zum Einbinden vorgestellt: Emedding Ace In Your Site
Der Code ist wie im Beispiel in index.html eingebunden, der Ace-Pfad liegt relativ zur index-file unter "js/ace" mit allen erforderlichen Dateien.

Unmittelbar vor dem Ende des Bodys steht daher folgender Code:

        <script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var ace = require("js/ace");
            var editor = ace.edit("editor");
            editor.setTheme("js/ace/theme/monokai");
            editor.getSession().setMode("js/ace/mode/javascript");
        </script>

und an ensprechender Stelle der anzuprechende Bereich über die ID "editor":

<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>

Leider bleibt der Text unformatiert. Es scheint aller Voraussicht nach ein Problem mit den Pfaden zu sein. Hat jemand eine Idee was noch fehlt oder wie die Pfade aussehen müssen?
Anmerkung: Laut Firebug kann das Ace-Objekt nicht instanziiert bzw. gefunden werden...

Grüße Cappaja

 

[CPoly]

Ich zitiere

Just copy one of src* subdirectories somewhere into your project, or use RequireJS to load the contents

du vermischst hier zwei Sachen. Ich nehme an du hast Require JS gar nicht eingebunden. Und falls doch, wieso bindest du dann die ace.js ein?

Funktioniert es denn nicht mit dem Code in dem Link?

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

 

[Cappaja]

Hallo CPoly,

danke für die Antwort, das require nutze ich inzwischen nicht mehr. In den src Ordnern fehlen die Ordnerstrukturen um die Themes und Sprachen anzusprechen. Da stehen lediglich die einzelnen .js Dateien für die Themes und Sprachen die man auf diesem Wege einzeln einbinden müsste was ich eigentlich nicht vor habe.
Ich habe die gesamte "lib/ace" Ordnerstruktur in mein Projekt unter "ace" relativ zur index.html eingebunden.

Meine Pfade hab ich jetzt so angepasst das zumindest kein Fehler mehr ausgegeben wird, Die Formatierung funktioniert dennoch noch immer nicht.

        <script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var editor = ace.edit("editor");
            editor.setTheme("ace/theme/monokai");
            editor.getSession().setMode("ace/mode/javascript");
        </script>

Noch irgend eine Idee? Und was hat es mit der RequireJS auf sich? Das ist n Ordner mit einer text.js Datei darin, was bringt mir das? Irgendwie verstehe ich den Zusammenhang nicht.

Grüße Cappaja

 

[CPoly]

http://requirejs.org/ hat mit dem Editor nichts zu tun. Ignorier es erstmal.


Wer sagt denn, dass "ace/mode/javascript" eine Ordnerstruktur widerspiegeln muss? Funktioniert es mit http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js ?

 

[Cappaja]

Die Pfade exisitieren zumindest in der lib/ace...

Die vorgeschlagene Referenz hatte ich auch schon versucht allerdings ohne Erfolg. Firebug liefert die Fehlermeldung "Failed to load script" http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/worker-javascript.js (nsresult = 0x805303f4)

Vielleicht noch ne Idee?

 

[CPoly]

Wenn ich deren Beispiel 1zu1 kopiere, funktioniert es.

Jetzt lade ich mir die Dateien alle runter https://github.com/ajaxorg/ace-builds/tree/master/src-min und kopiere sie in meinen "js" Ordner auf gleicher Ebene wie index.html und binde "js/ace.js" ein. Funktioniert auch.

Anbei ein zip meines Ordners.

 

[Cappaja]

Ich sag mal vielen Dank. Hätte selbst erstmal n unabhängiges Example testen sollen was ich eigentlich immer mache.
Das Problem lag nicht in den Pfaden sondern unglaublicherweise am CSS-Code. Diesen habe ich bewusst unterschlagen was dazu führte das der DIV komplett ausgeblendet wurde.

Nun habe ich noch das Problem das der Beispielcode auf der kompletten Seite überlagert und nicht explizit im vorgegebenen DIV liegt. Im HowTo scheint es auch keine passende Funktion dafür zu geben. Zusätzlich kommt jetzt noch ein Problem durch meinen AJAX-Call wo ich den content DIV-Bereich explizit lade. Wie kann ich also innerhalb des zu ladenden DIVs den Code entsprechend highliten?

Hier der Code zu meinem AJAX-Call der das content aktualisiert:

        <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){
            // load contents via AJAX
            $('#topbar li > a').click(function() {
                var href = $(this).attr('href'),
                    page = "contents/" + href;
                $('#content').load(page);            
                return false;
            }); 
        });
        //]]>
        </script>

Grüße Cappaja

 

[CPoly]

Nun habe ich noch das Problem das der Beispielcode auf der kompletten Seite überlagert

Hast du das hier bearbeitet?

#editor {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

Willst du nicht vielleicht einen syntax highlighter verwenden anstatt einen kompletten Editor? Z.b. http://prismjs.com/

 

[Cappaja]

Das Problem ist das position: absolute; es lässt sich nicht relativ angeben, sonst funktioniert der ganze Editor nicht. Die Funktion editor.resize(); bleibt ebenfalls ohne Erfolg.

So schön der Editor auch ist ich werde wohl deinen Rat befolgen und einen Syntax-Highlighter verwenden. Ich schau mir den Link gleich mal an.

Das Thema lass ich bis morgen mal noch geöffnet, vielleicht weiß ja noch jemand einen guten Rat.

Bis hier her mal Danke!