JSFiddle - React, Tailwind, and code Playground

by davekr

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://www.dillingermediaonline.com/bootstrap-wysiHtml5.css" >

<div lang="en" ng-app="demoApp" ng-controller="MainCtrl">  
    <div rich-text-editor></div> 
    <button class="btn btn-primary" ng-click="clickMe()">Click Me</button>
 
</div>




<script type="text/javascript" src="http://docs.angularjs.org/angular-resource-1.0.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/jhollingworth/bootstrap-wysihtml5/master/lib/js/bootstrap.js"></script>

<script src="http://www.dillingermediaonline.com/prettify.js"></script>
<script src="http://www.dillingermediaonline.com/wysiHtml5-0.3.0.js"></script>
<script src="http://www.dillingermediaonline.com/bootstrap-wysiHtml5.js"></script>

JavaScript

var demoApp = angular.module('demoApp', ['ngResource'], function($locationProvider) {
    $locationProvider.hashPrefix('');
});

function MainCtrl($scope) {
    
    $scope.clickMe = function(editor){
        
          alert($('#richtexteditor-content').val());
    }
      
}

demoApp.directive('richTextEditor', function( $log, $location) {
    return {            
        restrict : "E",
        replace : true,
        transclude : true,
        scope: {
                   
        },             
        template : 

                        "<div>" +

                                "<textarea id=\"richtexteditor-content\" style=\"height:300px;width:70%\" ></textarea>"+
            "{{test}}"+
                        "</div>",

        link : function( $scope, $element, $attrs, ngModel ) {
            $scope.editor = $('#richtexteditor-content').wysihtml5({
                "events": {
                    "change": function(attr1, attr2){
                          $scope.$apply(function($scope){$scope.test = $('#richtexteditor-content').val()})     
                    },
                }
            });

        }
    }
});