Emojionearea из https://github.com/mervick/emojionearea/ отлично работает на одном простом файле index.html, однако я не смог заставить его работать с директивой angularjs.Ниже приведен код, который я протестировал с
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./emojionearea/dist/emojionearea.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<title>Document</title>
</head>
<body style="margin: 50px">
<div ng-app="myApp">
<msg-area> </msg-area>
<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="./emojionearea/dist/emojionearea.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#example1").emojioneArea({
pickerPosition: "bottom"
});
})
</script>
</body>
</html>
dir.html
<div>
<textarea placeholder="Comment..." autofocus="true" ng-model="msg" ng-trim="false" id="example1"></textarea>
</div>
script.js
angular
.module("myApp", [])
.directive("msgArea", function () {
return {
restrict: 'EA',
replace: false,
templateUrl: 'dir.html',
scope: {
msg: '='
}
};
});
Приведенный выше код работает иногда после большого количества обновлений страницы.