Angular: EpicEditor Widget - 1.0.0rc10

An example of how to properly integrate an markdown editor (like EpicEditor) for AngularJS

by programmieraffe

HTML

<script src="http://resources.holycrap.ws/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js" ng:autobind></script>
<div ng:app="myApp">
<div ng:controller="Tester">
    <h2>Scroll Down!</h2>
    <div class="clear">
        <div class="boxes">
            <div ng:repeat="box in boxes">
                <h1>{{box.name}}</h1>
                <textarea ui:tinymce="fast" ng:model="box.content"></textarea>
                {{box.content}}
            </div>
        </div>
        <h1>Dynamic Data:</h1>
        <p>Uses <a href="http://www.tinymce.com/wiki.php/Configuration:onchange_callback">onchange_callback</a> which fires less often.</p>
        <pre>{{boxes}}</pre>
    </div>
    <div class="boxes">
        <h1>Fixed</h1>
        <textarea ui:tinymce="fast" ng:model="content"></textarea>
    </div>
    <h1>Fixed Data:</h1>
    <p>Uses <a href="http://www.tinymce.com/wiki.php/Configuration:handle_event_callback">handle_event_callback</a> which fires more often.</p>
    <pre>{{content}}</pre>
</div>
</div>

CSS

h1 { margin: 10px 0 4px; font-weight: bold; }
h2 { color: red; }
p { font-size: 80%; }
body { font-family: helvetica }
.boxes { float: left; margin-right: 10px; }
.clear { overflow: auto; }

JavaScript

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


// --- Custom TinyMCE Service --- //
myApp.directive('uiTinymce', function() {
    return {
        link: function (scope, element, attrs, controller){
            console.log('compile');
            
            setTimeout(function(){
                
                            element.tinymce({
                    // Location of TinyMCE script
                    script_url: 'http://resources.holycrap.ws/jscripts/tiny_mce/tiny_mce.js',

                    // General options
                    theme: "simple",

                    // Update Textarea and Trigger change event
                    handle_event_callback: function(e) {
                        
                        console.log('handle_event_callback',e,element,this,this.isDirty());
                        
                        if (this.isDirty()) {
                            this.save();
                            element.trigger('change');
                        }
                        return true;
                    }
                });



            }, 0);
            
            

        }
    }
});
    
    
function Tester($scope) {
    $scope.boxes = [{
        name: 'First'},
    {
        name: 'Second'}];
}