Anwenden von CodeMirror auf ein ng-modellgebundenes Textfeld

Ich habe einen sehr einfachen Spielplatz programmiert. Aus irgendeinem Grund muss ich das HTML-Panel in eine AngularJS-App einbetten.Anwenden von CodeMirror auf ein ng-modellgebundenes Textfeld

In this version, legte ich einen JQuery-Change-Listener in das CSS-Panel und wandte CodeMirror auf das Textfeld an. Und es hat funktioniert.

Ich fühlte mich nicht wohl mit einem JQuery-Event-Listener in einer AngularJS-App, also entschied ich mich, das CSS-Panel an die AngularJS-App zu binden, und machte this version. Aber jetzt ist das Problem der Codemirror-Code (die ich unten einen Kommentar) funktioniert nicht mehr:

HTML:

<body> 
    <div ng-app="myApp" ng-controller="myCtrl"> 
    HTML:<br> 
    <textarea rows=10 cols=40 ng-model="area1">html body area</textarea> 
    <br>CSS:<br> 
    <textarea id="css" rows=10 cols=40 ng-model="css"></textarea> 
    </div> 
    Output: 
    <section id="output"> 
    <iframe></iframe> 
    </section> 
</body>

JavaScript:

var app = angular.module('myApp', []); 

app.controller('myCtrl', function($scope) { 
    $scope.area1 = "<body>default</body>"; 
    $scope.$watch('area1', function (json) { 
     render(); 
    }, true); 

    $scope.css="body {color: red}"; 
    $scope.$watch('css', function (json) { 
     // CodeMirror does not work anymore 
     // var cm_opt = { mode: 'css', gutter: true, lineNumbers: false }; 
     // var css_box = document.getElementById("css"); 
     // var css_editor = CodeMirror.fromTextArea(css_box, cm_opt); 
     render(); 
    }, true); 

    function render() { 
     var source = "<html><head><style>" + $scope.css + "</style></head>" + 
        $scope.area1 +"</html>"; 

     var iframe = document.querySelector('#output iframe'), 
      iframe_doc = iframe.contentDocument; 

     iframe_doc.open(); 
     iframe_doc.write(source); 
     iframe_doc.close(); 
    } 
});

Wer weiß, wie Codemirror Arbeit zu machen Hier?

Ist es außerdem eine schlechte Idee, JQuery-Ereignis-Listener in einer AngularJS-App zu verwenden? Was ist die beste Struktur, um diesen Spielplatz zu programmieren, der AngularJS + CodeMirror verwendet?

Edit 1: Ich fand this thread, dann habe ich eine codeMirror directive, es nicht gut funktioniert. DevTools zeigt mir einen Fehler TypeError: textarea.getAttribute is not a function um CodeMirror.fromTextArea(...).

Quelle

2016-12-27 Anonymous

Here Ich habe Demo für Code Spiegel in angularjs hinzugefügt. Ich hoffe, es werden Ihnen helfen, ...

Here Demo

Quelle

2016-12-29 13:24:03

In der Tat sollte ich 'UI-Codemirror' verwenden. Zur Erinnerung, hier ist eine [funktionierende Version] (https://jsbin.com/yiviwol/8/edit?html,js,output) und eine verwandte Frage: [Benutze 2 ui-codemirrors in 1 controller] (http ://Paketüberfluss.com/questions/41498554/use-2-ui-codemirrors-in-1-controller) –

Sie

UI.Codemirror directive

Quelle

2017-01-05 10:23:51

Antwort können Sie den zweiten Versuch von OP

In der link der Richtlinie Funktion lösen Sie verwenden den elem Parameter als reines HTML-Element (was von Codemirror erwartet wird), aber eckig stellt es als JQL bereit ite gewickeltes Element - also im Grunde brauchen Sie nur aus dem HTML-Element zu erhalten und es zu Codemirror bieten, dann wird es funktionieren:

var editor = CodeMirror.fromTextArea(elm[0], cm_opt);

(beachten Sie elem[0] statt elem)

In AngularJS es Es ist keine schlechte Übung, Direktiven zu verwenden, um JQuery-basierte Logik in Komponenten zu integrieren, die auf anderen Technologien wie Code-Mirror basieren. In einigen Fällen können Sie dies selbst tun, können aber auch bereits erstellte Drittanbieter-Bibliotheken verwenden, wie in den anderen Antworten erwähnt.

Was auch immer Sie tun, stellen Sie sicher, dass Sie nicht-eckige Logik gut kapseln, indem Sie Anweisungen und Dienste verwenden.

Hoffe, das hilft.

Quelle

2017-01-05 10:34:34

Danke, 'var editor = CodeMirror.fromTextArea (elm [0], cm_opt);' funktioniert, und ich werde 'ui verwenden -codemirror ... –

Anwenden von CodeMirror auf ein ng-modellgebundenes Textfeld

Antwort

Verwandte Themen