Place textAngular toolbar at bottom of the textEditor Place textAngular toolbar at bottom of the textEditor angularjs angularjs

Place textAngular toolbar at bottom of the textEditor


You can use the attribute ta-target-toolbars on the text-angular directive to have it register with an alternate toolbar:

<div text-angular ta-target-toolbars="toolbar" ng-model="htmlcontent"></div><div text-angular-toolbar class="toolbar" name="toolbar"></div>

Here is an example: http://plnkr.co/edit/B2NU8RpUlSrKVFAlpOU2?p=preview

The relevant lines of code involcing ta-target-toolbars from textAngular are available here: https://github.com/fraywing/textAngular/blob/64d31658186bb9bb54c07f7c719d73a472d60b11/src/textAngular.js#L642-L656


you can play a bit with css to move toolbar under text area

please see here http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview

.ta-editor {  height: 400px;  overflow: auto;  font-family: inherit;  font-size: 100%;  margin: 20px 0;  position: absolute;  top: 0;  width: 100%;}.editor-wrapper {  position: relative;  height: 470px;}.ta-toolbar {  position: absolute;  bottom: 0;  width: 100%;}