angular-froala
Version:
Angular.js bindings for Froala WYSIWYG HTML rich text editor
125 lines (107 loc) • 6.29 kB
HTML
<!-- define angular app -->
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<!-- Include Froala Editor styles -->
<link rel="stylesheet" href="../node_modules/froala-editor/css/froala_editor.min.css" />
<link rel="stylesheet" href="../node_modules/froala-editor/css/froala_style.min.css" />
<!-- Include Froala Editor Plugins styles -->
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/char_counter.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/code_view.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/colors.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/emoticons.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/file.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/fullscreen.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/image_manager.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/image.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/line_breaker.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/table.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/video.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/plugins/special_characters.css">
<link rel="stylesheet" href="../node_modules/froala-editor/css/third_party/font_awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Include Froala Editor -->
<script src="../node_modules/froala-editor/js/froala_editor.pkgd.min.js"></script>
<!-- Include Froala Editor Plugins -->
<script src="../node_modules/froala-editor/js/plugins/align.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/char_counter.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/code_beautifier.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/code_view.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/colors.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/emoticons.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/entities.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/file.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/font_family.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/font_size.min.js"></script>
<script src="../node_modules/froala-editor/js/third_party/font_awesome.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/fullscreen.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/image.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/image_manager.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/inline_style.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/line_breaker.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/link.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/lists.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/paragraph_format.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/paragraph_style.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/quote.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/save.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/table.min.js"></script>
<script src="../node_modules/froala-editor/js/plugins/video.min.js"></script>
<!-- End Froala -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../src/angular-froala.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="app.css">
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<h1>Angular adapter for the Froala WYSIWYG editor</h1>
<div class="sample">
<h2>Sample 1: Inline Edit</h2>
<div froala="titleOptions" ng-model="myTitle"></div>
</div>
<div class="sample">
<h2>Sample 2: Full Editor</h2>
<textarea id="froala-sample-2" froala ng-model="sample2Text"></textarea>
<h4>Rendered Content:</h4>
<div froala-view="sample2Text"></div>
</div>
<div class="sample">
<h2>Sample 3: Manual Initialization</h2>
<button class="manual" ng-click="initControls.initialize()">Initialize Editor</button>
<button ng-click="initControls.destroy()" ng-show="initControls.getEditor() != null">Close Editor</button>
<button ng-click="deleteAll()" ng-show="initControls.getEditor() != null">Delete All</button>
<div id="froala-sample-3" froala froala-init="initialize(initControls)" ng-model="sample3Text"></div>
</div>
<div class="sample">
<h2>Sample 4: Editor on 'img' tag</h2>
<img froala ng-model="imgModel" />
<h4>Model Obj:</h4>
<div>{{imgModel}}</div>
</div>
<div class="sample">
<h2>Sample 5: Editor on 'button' tag</h2>
<button froala ng-model="buttonModel"></button>
<h4>Model Obj:</h4>
<div>{{buttonModel}}</div>
</div>
<div class="sample">
<h2>Sample 6: Editor on 'input' tag</h2>
<input froala="inputOptions" ng-model="inputModel" />
<h4>Model Obj:</h4>
<div>{{inputModel}}</div>
</div>
<div class="sample">
<h2>Sample 7: Editor on 'a' tag. Manual Initialization</h2>
<button class="manual" ng-click="linkInitControls.initialize()">Initialize Editor</button>
<button ng-click="linkInitControls.destroy()" ng-show="linkInitControls.getEditor() != null">Close Editor</button>
<div>
<a froala froala-init="initializeLink(initControls)" ng-model="linkModel">Froala Editor</a>
</div>
<h4>Model Obj:</h4>
<div>{{linkModel}}</div>
</div>
</body>
</html>