Skip to content

Instantly share code, notes, and snippets.

@ipeychev
Last active June 20, 2016 12:25
Show Gist options
  • Save ipeychev/455b3b8a435d795c9667 to your computer and use it in GitHub Desktop.
Save ipeychev/455b3b8a435d795c9667 to your computer and use it in GitHub Desktop.
AlloyEditor as an Angular directive
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using AlloyEditor as an Angular directive</title>
<style type="text/css">
.container {
margin-left: 30px;
margin-top: 30px;
}
</style>
<link rel="stylesheet" type="text/css" href="liferay/dist/alloy-editor/assets/alloy-editor-ocean-min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="liferay/dist/alloy-editor/alloy-editor-all.js"></script>
<script type="text/javascript">
var alloyEditorApp = angular.module('alloyEditorApp', []);
alloyEditorApp.directive('alloyEditor', function() {
return {
link: function(scope, el, attrs) {
AlloyEditor.editable(attrs.id);
},
restrict: 'A',
scope: {}
};
});
</script>
</head>
<body ng-app="alloyEditorApp">
<div class="container">
<textarea alloy-editor id="angularAlloy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lorem sit amet neque posuere rutrum sed a odio. Quisque sollicitudin nunc eu urna feugiat, eu egestas est cursus.</textarea>
</body>
</html>
@thiagogarbazza
Copy link

Directive for Angular created.

<alloy-editor id="myEditor" name="myEditor" ng-model="model.content"></alloy-editor>

See this repository for more information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment