Currently, I am working on a project using Angular-fullstack and attempting to integrate ui-TinyMCE. However, I encountered an issue when I made the following changes:
angular.module('academiaUnitateApp')
.controller('NewEntryCtrl', function ($http, $scope, $stateParams, entryService, Auth) {
$scope.entry = {};
});
to
angular.module('academiaUnitateApp', ['ui-tinymce'])
.controller('NewEntryCtrl', function ($http, $scope, $stateParams, entryService, Auth) {
$scope.entry = {};
$scope.tinymceOptions = {};
});
After these modifications, my interface changed unexpectedly.
As shown above,
I'm not sure what mistake I might have made. Can anyone provide insight?
The HTML structure in question is as follows:
<div>
<h1>
New chapter
</h1>
<form class="form" name="form" ng-submit="save(form)" novalidate>
<div class="form-group">
<label class="sr-only" for="title">Title</label>
<input class="form-control" name="title" type="text" placeholder="enter title here" required ng-model="entry.title" />
</div>
<div class="form-group">
<select required ng-model="entry.language">
<option disabled>Choose language</option>
<option ng-repeat="e in languages" value="{{e._id}}">{{e.name}}</option>
</select>
</div>
<div class="form-group">
<label class="sr-only" for="content">Content</label>
<textarea ui-tinymce="tinymceOptions" ng-model="entry.content" id="textarea" name="content" ></textarea>
</div>
<button type="submit" class="btn btn-success" id="save-btn"><span class="glyphicon glyphicon-ok"></span> Save</button>
</form>
</div>
<hr>
<div>
<h1>{{entry.title}}</h1>
<br/>
{{entry.content}}
</div>
I have added ui-TinyMCE to the list of dependencies in my bower file.
bower.json
{
"name": "academia-unitate",
"version": "0.0.0",
"dependencies": {
"angular": ">=1.2.*",
"json3": "~3.3.1",
"es5-shim": "~3.0.1",
"jquery": "~1.11.0",
"bootstrap": "~3.1.1",
"angular-resource": ">=1.2.*",
"angular-cookies": ">=1.2.*",
"angular-sanitize": ">=1.2.*",
"angular-bootstrap": "~0.11.0",
"font-awesome": ">=4.1.0",
"lodash": "~2.4.1",
"angular-socket-io": "~0.6.0",
"angular-ui-router": "~0.2.10",
"angular-ui-tinymce": "*"
},
"devDependencies": {
"angular-mocks": ">=1.2.*",
"angular-scenario": ">=1.2.*"
}
}