Directive Example 3rd Party binding

An example of how to properly integrate a WYSIWYG like TinyMCE into 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.0rc12/angular-1.0.0rc12.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>
                <div ui:tinymce="fast" ng:model="box.content"></div>
                {{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){
            
            
            // i have an element and i want to map the input to the model provided
            
            var newEl = $('<textarea />').appendTo(element);
            
            newEl.on('change',function(){
                console.log('change',this);
                element.html($(this).val());
            });
            
            

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