Angular: Epic Edtor Widget - 1.0.0rc10

http://oscargodson.github.com/EpicEditor/

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">
    <div id="epic"></div>
    <div class="clear">
        <div class="boxes">
            <div ng:repeat="box in boxes">
                <h1>{{box.name}}</h1>
                <div ui:epic-editor ng:model="box.content"></div>
                {{box.content}}
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
/**
 * EpicEditor - An Embeddable JavaScript Markdown Editor (https://github.com/OscarGodson/EpicEditor)
 * Copyright (c) 2011-2012, Oscar Godson. (MIT Licensed)
 */(function(a,b){function c(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a.style[c]=b[c])}function e(b,c){var d=b,e=null;return a.getComputedStyle?e=document.defaultView.getComputedStyle(d,null).getPropertyValue(c):d.currentStyle&&(e=d.currentStyle[c]),e}function f(a,b,c){var f={},g;if(b==="save"){for(g in c)c.hasOwnProperty(g)&&(f[g]=e(a,g));d(a,c)}else b==="apply"&&d(a,c);return f}function g(a){var b=parseInt(e(a,"border-left-width"),10)+parseInt(e(a,"border-right-width"),10),c=parseInt(e(a,"padding-left"),10)+parseInt(e(a,"padding-right"),10),d=a.offsetWidth,f;return isNaN(b)&&(b=0),f=b+c+d,f}function h(a){var b=parseInt(e(a,"border-top-width"),10)+parseInt(e(a,"border-bottom-width"),10),c=parseInt(e(a,"padding-top"),10)+parseInt(e(a,"padding-bottom"),10),d=a.offsetHeight,f;return isNaN(b)&&(b=0),f=b+c+d,f}function i(a,b,d){d=d||"";var e=b.getElementsByTagName("head")[0],f=b.createElement("link");c(f,{type:"text/css",id:d,rel:"stylesheet",href:a,name:a,media:"screen"}),e.appendChild(f)}function j(a,b,c){a.className=a.className.replace(b,c)}function k(a){return a.contentDocument||a.contentWindow.document}function l(a){var b;return...

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; }
html, body, iframe, div { margin:0; padding:0; }

#epiceditor-utilbar {
  position:fixed;
  bottom:10px;
  right:10px;
  padding:5px;
}

#epiceditor-utilbar img {
  display:block;
  float:left;
  width: 30px;
  height: 30px;
}

#epiceditor-utilbar img:last-child {
  margin-left: 15px;
}

#epiceditor-utilbar img:hover {
  cursor:pointer;
}

.epiceditor-edit-mode #epiceditor-utilbar img.epiceditor-toggle-edit-btn {
  display: none;
}

.epiceditor-preview-mode #epiceditor-utilbar img.epiceditor-toggle-preview-btn {
  display: none;
}

JavaScript

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


// --- Custom TinyMCE Service --- //
myApp.directive('uiEpicEditor', function() {
    return {
        
        compile: function(tElement, tAttrs, transclude){
            
            // https://github.com/OscarGodson/EpicEditor/issues/71
            var newEl = $('<div></div>').addClass("epic-editor").appendTo('body');
            var domEl = newEl.get(0);
        },
        
        link: function(scope, element, attrs, controller) {
               
        var epicElement = element.find('.epic-editor:first').get(0);

        
            console.log('link', scope, element, attrs, controller);

            var opts = {
                    container: epicElement,
                theme:{
                    base: 'http://oscargodson.github.com/EpicEditor/epiceditor/themes/base/epiceditor.css'
                }
            };

/*
  basePath: 'epiceditor',
  localStorageName: 'epiceditor',
  parser: marked,
  file: {
    name: 'epiceditor',
    defaultContent: '',
    autoSave: 100
  },
  theme: {
    base:'/themes/base/epiceditor.css',
    preview:'/themes/preview/preview-dark.css',
    editor:'/themes/editor/epic-dark.css'
  },
  focusOnLoad: false,
  shortcut: {
    modifier: 18,
    fullscreen: 70,
    preview: 80,
    edit: 79
  }
}*/
            var editor = new EpicEditor(opts);
            editor.load(function() {
                console.log("Editor loaded.")
            });
                
                editor.on('update',function(){
  console.log('Editor was updated',element);
                    element.val(editor.getElement('editor').body.innerHTML);
                    
                    console.log(editor.getElement('editor').body.innerHTML); // Returns the editor's content
                    
               });
        }
    }
});


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